/*
Copyright (C) 2017  Cloudbase Solutions SRL
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import React from "react";
import { observer } from "mobx-react";
import styled from "styled-components";

import StatusImage from "@src/components/ui/StatusComponents/StatusImage";
import Button from "@src/components/ui/Button";
import FieldInput from "@src/components/ui/FieldInput";

import KeyboardManager from "@src/utils/KeyboardManager";
import type { Project } from "@src/@types/Project";
import { ThemePalette } from "@src/components/Theme";

import duplicateImage from "./images/duplicate.svg";

const Wrapper = styled.div<any>`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px 32px 32px;
`;
const Options = styled.div<any>`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
`;
const Image = styled.div<any>`
  margin-top: 48px;
  margin-bottom: 80px;
  width: 128px;
  height: 96px;
  background: url("${duplicateImage}") no-repeat center;
`;
const Message = styled.div<any>`
  margin-top: 48px;
  text-align: center;
`;
const Title = styled.div<any>`
  font-size: 18px;
  margin-bottom: 8px;
`;
const Subtitle = styled.div<any>`
  color: ${ThemePalette.grayscale[4]};
`;
const Form = styled.div<any>`
  margin-bottom: 128px;
`;
const Loading = styled.div<any>`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
`;
const Buttons = styled.div<any>`
  display: flex;
  justify-content: space-between;
  width: 100%;
`;
const FieldInputStyled = styled(FieldInput)`
  width: 319px;
  justify-content: space-between;
`;
type Props = {
  projects: Project[];
  selectedProjectId: string;
  duplicating: boolean;
  onCancelClick: () => void;
  onDuplicateClick: (projectId: string) => void;
};
type State = {
  selectedProjectId: string;
};
@observer
class EndpointDuplicateOptions extends React.Component<Props, State> {
  UNSAFE_componentWillMount() {
    this.setState({ selectedProjectId: this.props.selectedProjectId });
  }

  componentDidMount() {
    KeyboardManager.onEnter(
      "duplicate-options",
      () => {
        this.props.onDuplicateClick(this.state.selectedProjectId);
      },
      2,
    );
  }

  componentWillUnmount() {
    KeyboardManager.removeKeyDown("duplicate-options");
  }

  renderDuplicating() {
    return (
      <Loading>
        <StatusImage loading />
        <Message>
          <Title>Duplicating Endpoint</Title>
          <Subtitle>Please wait ...</Subtitle>
        </Message>
      </Loading>
    );
  }

  renderOptions() {
    return (
      <Options>
        <Image />
        <Form>
          <FieldInputStyled
            name="duplicate_to_project"
            label="Duplicate To Project"
            type="string"
            enum={this.props.projects}
            value={this.state.selectedProjectId}
            onChange={projectId => {
              this.setState({ selectedProjectId: projectId });
            }}
            width={318}
            layout="page"
          />
        </Form>
        <Buttons>
          <Button secondary onClick={this.props.onCancelClick}>
            Cancel
          </Button>
          <Button
            onClick={() => {
              this.props.onDuplicateClick(this.state.selectedProjectId);
            }}
          >
            Duplicate
          </Button>
        </Buttons>
      </Options>
    );
  }

  render() {
    return (
      <Wrapper>
        {this.props.duplicating
          ? this.renderDuplicating()
          : this.renderOptions()}
      </Wrapper>
    );
  }
}

export default EndpointDuplicateOptions;
