import { FC, useEffect, useMemo } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { useParams } from 'react-router-dom';

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

import FormRadioGroup from '@material-hu/components/composed-components/RadioGroup/form';
import Alert from '@material-hu/components/design-system/Alert';
import FormSwitcher from '@material-hu/components/design-system/Switcher/form';

import usePermissions from 'src/hooks/usePermissions';
import {
  GroupApprovalPolicies,
  GroupPrivacyPolicies,
  GroupPublicationPolicies,
} from 'src/types/groups';
import { insertIf } from 'src/utils/arrayUtils';
import { UserPermissions } from 'src/utils/permissions';

import FormCoverPicture from 'src/components/FormInputs/FormCoverPicture';
import FormImageMenu from 'src/components/FormInputs/FormImageMenu';
import FormSelect from 'src/components/FormInputs/FormSelect';
import FormTextField from 'src/components/FormInputs/FormTextField';

import {
  getPrivacyIcon,
  GROUP_DETAIL_PAGE_BANNER_DIMENSIONS,
  GroupPublicationPoliciesKeys,
} from '../constants';

import ConfigurationSection, {
  type ConfigurationSectionProps,
} from './ConfigurationSection';

const privacyPolicies = Object.keys(GroupPrivacyPolicies);

const approvalPolicy = Object.keys(GroupApprovalPolicies);

type ManageConfigurationProps = {
  disabled?: boolean;
};

const ManageConfiguration: FC<ManageConfigurationProps> = ({
  disabled = false,
}) => {
  const { t } = useTranslation(['group']);
  const { setValue, watch } = useFormContext();
  const theme = useTheme();

  const params = useParams();
  const isEditPage = Boolean(params.id);
  const isMultiCompany = useWatch({ name: 'isMultiCompany' });
  const multiCompanyDisabled = Boolean(disabled || isEditPage);
  const publicationPolicy = watch('publicationPolicy');

  const { hasAll: canCreateMultiCompanyGroups } = usePermissions([
    UserPermissions.CREATE_MULTICOMPANY_GROUPS,
    UserPermissions.VIEW_MULTICOMPANY_GROUPS,
  ]);

  // Automatically set privacy to SECRET when multi-company is turned on
  useEffect(() => {
    if (isMultiCompany) {
      setValue('privacyPolicy', GroupPrivacyPolicies.SECRET);
    }
  }, [isMultiCompany, setValue]);

  const privacyOptions = useMemo(
    () =>
      privacyPolicies.map(type => {
        const optionDisabled = isMultiCompany;
        return {
          value: type,
          label: t(`${type.toLowerCase()}`),
          icon: getPrivacyIcon(type as GroupPrivacyPolicies, optionDisabled),
          disabled: optionDisabled,
        };
      }),
    [isMultiCompany, t],
  );

  const publicationOptions = GroupPublicationPoliciesKeys.map(value => ({
    value,
    label: t(`group:post_${value.toLowerCase()}`),
    helperText: t(`group:post_${value.toLowerCase()}_info`),
  }));

  const approvalPolicyOptions = approvalPolicy.map(value => ({
    value,
    label: t(`group:approval_policy_${value.toLowerCase()}`),
    helperText: t(`group:approval_policy_${value.toLowerCase()}_info`),
  }));

  const sections: ConfigurationSectionProps[] = useMemo(
    () => [
      {
        titleKey: 'group:group_name',
        gap: 1.5,
        renderContent: () => (
          <FormTextField
            label={t('group:group_name')}
            name="title"
            placeholder={t('group:group_name_placeholder')}
            inputProps={{ maxLength: 50 }}
            rules={{ required: true }}
            helperText={t('group:group_name_helper_text')}
            disabled={disabled}
          />
        ),
      },
      {
        titleKey: 'group:icon',
        gap: 1,
        renderContent: () => (
          <FormImageMenu
            name="icon"
            width={520}
            disabled={disabled}
          />
        ),
      },
      {
        titleKey: 'group:banner_image_web',
        gap: 2,
        renderContent: () => (
          <FormCoverPicture
            name="banner"
            recommendedWidth={GROUP_DETAIL_PAGE_BANNER_DIMENSIONS.WIDTH}
            recommendedHeight={GROUP_DETAIL_PAGE_BANNER_DIMENSIONS.HEIGHT}
            disabled={disabled}
          />
        ),
      },
      {
        titleKey: 'group:group_description',
        gap: 0.5,
        renderContent: () => (
          <FormTextField
            label={t('group:group_description')}
            name="description"
            multiline
            showCounter
            maxLength={250}
            placeholder={t('group:group_description_placeholder')}
            inputProps={{ maxLength: 250, sx: { minHeight: '120px' } }}
            disabled={disabled}
          />
        ),
      },
      ...insertIf(canCreateMultiCompanyGroups, {
        renderContent: () => (
          <FormSwitcher
            name="isMultiCompany"
            switcherProps={{
              title: t('group:multi_company_create_group'),
              description: t('group:multi_company_create_group_description'),
              disabled: multiCompanyDisabled,
              ...(multiCompanyDisabled
                ? {
                    sx: {
                      '& .MuiSwitch-switchBase.Mui-disabled.Mui-checked + .MuiSwitch-track':
                        {
                          backgroundColor:
                            theme.palette.new?.action?.background?.brand
                              ?.selected,
                          opacity: 1,
                        },
                      '& .MuiSwitch-switchBase.Mui-disabled .MuiSwitch-thumb': {
                        backgroundColor: 'common.white',
                      },
                    },
                  }
                : {
                    titleProps: {
                      sx: {
                        color: 'textColors.neutralText',
                      },
                    },
                    descriptionProps: {
                      sx: {
                        color: 'textColors.neutralTextLighter',
                      },
                    },
                  }),
            }}
          />
        ),
      }),
      {
        titleKey: 'group:privacy',
        gap: 1,
        renderContent: () => (
          <FormSelect
            name="privacyPolicy"
            label={t('group:privacy_type')}
            options={privacyOptions}
            disabled={disabled || isMultiCompany}
            showIcons
            selectProps={{
              inputProps: {
                sx: {
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                  backgroundColor: isMultiCompany
                    ? theme.palette.hugoBackground?.neutralBgTransparent
                    : undefined,
                  '& .MuiListItemIcon-root': {
                    minWidth: 0,
                  },
                },
              },
            }}
            MenuProps={{
              PaperProps: {
                style: {
                  maxWidth: '650px',
                },
              },
            }}
          />
        ),
      },
      {
        titleKey: 'group:post_policy',
        gap: 1,
        renderContent: () => (
          <FormRadioGroup
            name="publicationPolicy"
            options={publicationOptions}
          />
        ),
      },
      ...(publicationPolicy === GroupPublicationPolicies.ONLY_ADMINS
        ? []
        : [
            {
              titleKey: 'group:approval_policy_setting_web',
              gap: 2,
              renderContent: () => (
                <FormRadioGroup
                  name="approvalPolicy"
                  options={approvalPolicyOptions}
                />
              ),
            },
          ]),
      {
        titleKey: 'group:members_can_leave_title',
        gap: 1.5,
        renderContent: () => (
          <Stack gap={1.5}>
            <Alert
              severity="info"
              title={t('group:members_can_leave_warning_title')}
              description={t('group:members_can_leave_warning_description')}
            />
            <FormRadioGroup
              name="membersCanLeave"
              options={[
                {
                  value: 'true',
                  label: t('group:members_can_leave_enabled'),
                  helperText: t('group:members_can_leave_enabled_description'),
                },
                {
                  value: 'false',
                  label: t('group:members_can_leave_disabled'),
                  helperText: t('group:members_can_leave_disabled_description'),
                },
              ]}
            />
          </Stack>
        ),
      },
    ],
    [
      canCreateMultiCompanyGroups,
      disabled,
      isEditPage,
      isMultiCompany,
      multiCompanyDisabled,
      privacyOptions,
      publicationOptions,
      approvalPolicyOptions,
      t,
      theme,
      publicationPolicy,
    ],
  );

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack>
        <Typography
          variant="globalL"
          fontWeight="fontWeightSemiBold"
        >
          {t('group:configuration')}
        </Typography>
        <Typography
          variant="globalS"
          color="textColors.neutralTextLighter"
        >
          {t('group:configure_info')}
        </Typography>
      </Stack>
      {sections.map(section => (
        <ConfigurationSection
          key={section.titleKey || 'multi-company'}
          {...section}
        />
      ))}
    </Stack>
  );
};

export default ManageConfiguration;