import { useEffect } from 'react';
import { FormProvider, useFormContext } from 'react-hook-form';

import { IconExclamationCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuFormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import { Title } from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { NodeType } from 'src/types/workflows';
import { useLokaliseTranslation } from 'src/utils/i18n';

import HugoUsersAutocomplete from 'src/components/UsersAutocomplete/HugoUsersAutocomplete';

import { ApprovalPolicyType, conditionOptions, roleOptions } from '../../utils';
import RolesAutocomplete from '../RolesAutocomplete';

type RequestApprovalProps = {
  isNewNode?: boolean;
};

const RequestApproval = ({ isNewNode = false }: RequestApprovalProps) => {
  const { t } = useLokaliseTranslation('workflows');
  const theme = useTheme();
  const HuGoThemeProvider = useHuGoTheme();
  const form = useFormContext();
  const { setValue, getValues, watch } = form;

  useEffect(() => {
    setValue('node.type', NodeType.APPROVAL);
    setValue('node.newAssigneeId', undefined);
    setValue('node.newStateId', undefined);
    setValue('node.agentGroupId', undefined);
    setValue('node.assigneeId', undefined);
    setValue('node.blockingTask', false);

    if (isNewNode) {
      setValue('node.approverRoles', []);
      setValue('node.approverIds', []);
      setValue(
        'node.approvalPolicyOption',
        conditionOptions(t)[ApprovalPolicyType.ALL],
      );
      setValue('node.name', '');
    } else {
      /* Roles */
      const currentRoleValues =
        getValues('node.approverRoles')?.map((role: any) =>
          typeof role === 'object' ? role.value : role,
        ) || [];

      setValue(
        'node.approverRoles',
        roleOptions(t).filter(role => currentRoleValues.includes(role.value)),
      );

      /* Approval Policy */
      const approvalPolicy = getValues('node.approvalPolicy');
      const policyType = approvalPolicy?.type || approvalPolicy;
      const policyOption =
        conditionOptions(t)[
          (policyType as ApprovalPolicyType) || ApprovalPolicyType.ALL
        ];
      setValue('node.approvalPolicyOption', policyOption);
    }
  }, [isNewNode]);

  const hasValue = watch('node.approvalPolicyOption');

  const { node } = form.watch();
  const hasError =
    !isNewNode && !node?.approverIds?.length && !node?.approverRoles?.length;

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        <Stack sx={{ height: '100%', gap: 2, overflow: 'auto' }}>
          <Stack
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.elements.grey,
              borderRadius: 2,
              gap: 2,
              p: 2,
            }}
          >
            <FormInputClassic
              name="node.name"
              inputProps={{
                label: t('request_name'),
                placeholder: t('write_here'),
                hasCounter: false,
              }}
              rules={{
                required: {
                  value: true,
                  message: t('validations:required'),
                },
              }}
            />
          </Stack>
          <Stack
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.elements.grey,
              borderRadius: 2,
              p: 2,
            }}
          >
            {hasValue && (
              <HuFormAutocomplete
                name="node.approvalPolicyOption"
                autocompleteProps={{
                  label: t('condition'),
                  disableClearable: true,
                }}
                options={Object.values(conditionOptions(t))}
              />
            )}
            {!hasValue && (
              <HuFormAutocomplete
                name="node.approvalPolicyOption"
                autocompleteProps={{
                  label: t('condition'),
                  disabled: true,
                }}
                options={[]}
              />
            )}
            <Title
              variant="S"
              sx={{
                mt: 2,
                mb: 1,
                ...(hasError && {
                  '& .MuiTypography-globalS': {
                    color: 'textColors.errorText',
                  },
                }),
              }}
              title={t('select_approvers')}
              description={t('select_approvers_description')}
            />
            <Stack
              sx={{
                gap: 2,
                backgroundColor: theme =>
                  theme.palette.new.background.layout.tertiary,
                borderRadius: 2,
                p: 2,
                ...(hasError && {
                  outline: theme =>
                    `1px solid ${theme.palette.new.border.states.error}`,
                }),
              }}
            >
              <HugoUsersAutocomplete
                name="node.approverIds"
                autocompleteProps={{
                  label: t('specific_users'),
                  placeholder: t('select_users'),
                  multiple: true,
                  limitTags: 10,
                }}
              />
              <RolesAutocomplete
                name="node.approverRoles"
                autocompleteProps={{
                  label: t('roles'),
                  placeholder: t('select_roles'),
                  multiple: true,
                }}
              />
            </Stack>
            {hasError && (
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 0.5,
                  mt: 1,
                }}
              >
                <IconExclamationCircle
                  size={16}
                  color={theme.palette.new.text.feedback.error}
                />
                <Typography
                  variant="globalS"
                  sx={{
                    color: theme => theme.palette.new.text.feedback.error,
                  }}
                >
                  {t('validations:required')}
                </Typography>
              </Stack>
            )}
          </Stack>
        </Stack>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default RequestApproval;