import * as React from 'react';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { Button, TextBox, PaymentSection, PaymentForm } from '@nova-hf/ui';
import { Mutation } from '@apollo/client/react/components';

import { ADD_DEPARTMENT } from 'graphql/mutations/departments';

import { inject } from 'mobx-react';

interface IDepartmentsProps extends WithTranslation {
  ui?: any;
  departments: any;
  ssn: string;
}

const Departments: React.FunctionComponent<IDepartmentsProps> = inject('ui')((props) => {
  const { t, departments, ssn, ui: { pageColor } } = props;
  const [newDepartmentName, setNewDepartmentName] = React.useState('');
  const [textBoxStatus, setTextBoxStatus] = React.useState('');
  const [textBoxMessage, setTextBoxMessage] = React.useState('');
  const [isDisabled, setIsDisabled] = React.useState(true);

  /**
   * Checks if there is already a department with the same name as newName
   * @param newName {string} New department name
   * @return {boolean} True if name already exists false otherwise
   */
  const doesDepartmentExist = (newDepName: string, depsArr: []): boolean => {

    const parentName = ((arr: []) => {
      const parent = arr.find((el: any) => {
        return el.isParent;
      }) ?? { name: '' };

      return parent.name;
    })(depsArr);

    return depsArr.find((el: any) => {
      return el.name === (`${parentName} - ${newDepName} `);
    }) ? true : false;
  };

  const clearMessage = () => {
    setTextBoxStatus('');
    setTextBoxMessage('');
  };

  const setNewName = (newName: string, depsArr: []) => {
    setNewDepartmentName(newName);
    const departmentExists = doesDepartmentExist(newName, depsArr);

    if (departmentExists) {
      setIsDisabled(true);
      setTextBoxStatus('warning');
      setTextBoxMessage(t('departments.message.warning'));
    } else {
      newName.length ? setIsDisabled(false) : setIsDisabled(true);
      clearMessage();
    }
  };

  const createDepartment = async (createFunc: any, name: string) => {
    try {
      await createFunc({ variables: { input: { departmentName: name , ssn } } });
      setTextBoxStatus('success');
      setTextBoxMessage(t('departments.message.success'));
      setNewDepartmentName('');
    } catch (error) {
      setTextBoxStatus('error');
      setTextBoxMessage(t('departments.message.error'));
    }
  };

  return (
    <Mutation
      mutation={ADD_DEPARTMENT}
    >
      {
        (addDepartment, { loading }) => {
          return(
            <PaymentSection
              title={t('departments.title')}
              smallerTitle
              fullWidth
              noSpacingTop
            >
              <h3>{t('departments.createDepartmentHeading')}</h3>
              <PaymentForm onecolumn>
                <TextBox
                  name="newDepartment"
                  label={t('departments.newDepartmentName')}
                  status={textBoxStatus}
                  message={textBoxStatus.length ? textBoxMessage : ''}
                  type={'text'}
                  value={newDepartmentName}
                  onChange={(e: { target: { value: string; }; }) => setNewName(e.target.value, departments)}
                />
                <Button
                  big
                  fill
                  background={pageColor}
                  disabled={isDisabled}
                  loading={loading}
                  onClick={() => createDepartment(addDepartment, newDepartmentName)}
                  >
                  {t('departments.createDepartment')}
                </Button>
              </PaymentForm>
            </PaymentSection>
          );
        }
      }
    </Mutation>
  );
});

export default withTranslation('settings')(Departments);