import React, { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown, Form } from 'semantic-ui-react';
import { Popup } from '../../lib/custom-ui';

import { useForm } from '../../hooks';

import styles from './CardCopyStep.module.scss';
import store from '../../store';

const CardCopyStep = React.memo(
  ({ projectsToLists, defaultPath, onBoardFetch, onBack, onClose, onCopyCard }) => {
    const [t] = useTranslation();
    // Get store to get value for description string
    const st = store.getState();

    const keys = Object.keys(st.orm.Card.itemsById);
    if (defaultPath.description === undefined) {
      keys.forEach((key) => {
        if (key === defaultPath.id) {
          // eslint-disable-next-line no-param-reassign
          defaultPath.description = st.orm.Card.itemsById[key].description;
        }
      });
    }

    if (defaultPath.dueDate === null || defaultPath.dueDate === undefined) {
      // eslint-disable-next-line no-param-reassign
      delete defaultPath.dueDate;
    }

    const [path, handleFieldChange] = useForm(() => ({
      projectId: null,
      boardId: null,
      listId: null,
      name: defaultPath.name,
      description: defaultPath.description,
      tasks: defaultPath.tasks,
      attachments: defaultPath.attachments,
      labels: defaultPath.labels,
      users: defaultPath.users,
      ...defaultPath,
    }));

    const selectedProject = useMemo(
      () => projectsToLists.find((project) => project.id === path.projectId) || null,
      [projectsToLists, path.projectId],
    );

    const selectedBoard = useMemo(
      () =>
        (selectedProject && selectedProject.boards.find((board) => board.id === path.boardId)) ||
        null,
      [selectedProject, path.boardId],
    );

    const selectedList = useMemo(
      () => (selectedBoard && selectedBoard.lists.find((list) => list.id === path.listId)) || null,
      [selectedBoard, path.listId],
    );

    const handleBoardIdChange = useCallback(
      (event, data) => {
        if (selectedProject.boards.find((board) => board.id === data.value).isFetching === null) {
          onBoardFetch(data.value);
        }

        handleFieldChange(event, data);
      },
      [onBoardFetch, handleFieldChange, selectedProject],
    );

    const handleSubmit = useCallback(() => {
      onCopyCard(selectedList.id, path);
      onClose();
    }, [onCopyCard, selectedList.id, path, onClose]);

    return (
      <>
        <Popup.Header onBack={onBack}>
          {t('action.copyCard', {
            context: 'title',
          })}
        </Popup.Header>
        <Popup.Content>
          <Form onSubmit={handleSubmit}>
            <div className={styles.text}>{t('common.project')}</div>
            <Dropdown
              fluid
              selection
              name="projectId"
              options={projectsToLists.map((project) => ({
                text: project.name,
                value: project.id,
              }))}
              value={selectedProject && selectedProject.id}
              placeholder={
                projectsToLists.length === 0 ? t('common.noProjects') : t('common.selectProject')
              }
              disabled={projectsToLists.length === 0}
              className={styles.field}
              onChange={handleFieldChange}
            />
            {selectedProject && (
              <>
                <div className={styles.text}>{t('common.board')}</div>
                <Dropdown
                  fluid
                  selection
                  name="boardId"
                  options={selectedProject.boards.map((board) => ({
                    text: board.name,
                    value: board.id,
                  }))}
                  value={selectedBoard && selectedBoard.id}
                  placeholder={
                    selectedProject.boards.length === 0
                      ? t('common.noBoards')
                      : t('common.selectBoard')
                  }
                  disabled={selectedProject.boards.length === 0}
                  className={styles.field}
                  onChange={handleBoardIdChange}
                />
              </>
            )}
            {selectedBoard && (
              <>
                <div className={styles.text}>{t('common.list')}</div>
                <Dropdown
                  fluid
                  selection
                  name="listId"
                  options={selectedBoard.lists.map((list) => ({
                    text: list.name,
                    value: list.id,
                  }))}
                  value={selectedList && selectedList.id}
                  placeholder={
                    selectedBoard.isFetching === false && selectedBoard.lists.length === 0
                      ? t('common.noLists')
                      : t('common.selectList')
                  }
                  loading={selectedBoard.isFetching !== false}
                  disabled={selectedBoard.isFetching !== false || selectedBoard.lists.length === 0}
                  className={styles.field}
                  onChange={handleFieldChange}
                />
              </>
            )}
            <Button
              positive
              content={t('action.copy')} // change this action.copy
              disabled={(selectedBoard && selectedBoard.isFetching !== false) || !selectedList}
            />
          </Form>
        </Popup.Content>
      </>
    );
  },
);

CardCopyStep.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  description: PropTypes.string,
  /* eslint-disable react/forbid-prop-types */
  projectsToLists: PropTypes.array.isRequired,
  defaultPath: PropTypes.object.isRequired,
  /* eslint-enable react/forbid-prop-types */
  // onMove: PropTypes.func.isRequired,
  // onTransfer: PropTypes.func.isRequired,
  onBoardFetch: PropTypes.func.isRequired,
  onBack: PropTypes.func,
  onClose: PropTypes.func.isRequired,
  onCopyCard: PropTypes.func.isRequired,
};

CardCopyStep.defaultProps = {
  onBack: undefined,
  description: undefined,
};

export default CardCopyStep;