import { useMemo } from 'react';

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

import FormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';

import useAuth from 'src/contexts/JWTContext';
import { CERTIFICATE_ACCENT_COLOR_I18N_KEYS } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/constants';
import { certificateCreateFields } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/form';
import { CertificateColor } from 'src/pages/dashboard/Learning/Settings/Certificates/constants';
import { type LearningCertificateColor } from 'src/pages/dashboard/Learning/Settings/Certificates/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const CertificateColorSelect = () => {
  const { t } = useLokaliseTranslation(['learning', 'backoffice_only']);
  const { palette } = useTheme();
  const { instance } = useAuth();

  const newBase = palette.newBase;

  const colorHexMap = useMemo<Record<LearningCertificateColor, string>>(
    () => ({
      COMMUNITY: instance?.color ?? palette.new.graphics.brand[500],
      LIGHT_BLUE: palette.new.graphics.brand[300],
      DARK_BLUE: palette.new.graphics.brand[700],
      LIGHT_BROWN: palette.new.graphics.tan[500],
      DARK_BROWN: palette.new.graphics.tan[600],
      LIGHT_GREEN: palette.new.graphics.lime[500],
      DARK_GREEN: palette.new.graphics.lime[600],
      LIGHT_VIOLET: palette.new.graphics.purple[500],
      DARK_VIOLET: palette.new.graphics.purple[600],
      LIGHT_PURPLE: palette.new.graphics.mulberry[500],
      DARK_PURPLE: palette.new.graphics.mulberry[700],
      LIGHT_SKY_BLUE: palette.new.graphics.info[500],
      DARK_SKY_BLUE: palette.new.graphics.info[600],
      LIGHT_GRAY: newBase?.grey[100] ?? palette.grey[100],
      DARK_GRAY: newBase?.grey[950] ?? palette.grey[900],
      WHITE: newBase?.white ?? palette.common.white,
    }),
    [palette, instance?.color, newBase],
  );

  const options = useMemo(
    () =>
      Object.values(CertificateColor).map(color => ({
        value: color,
        label: t(CERTIFICATE_ACCENT_COLOR_I18N_KEYS[color]),
      })),
    [t],
  );

  return (
    <FormInputSelect
      name={certificateCreateFields.color()}
      inputProps={{
        label: t('general:color'),
        options,
        sx: { width: '100%' },
        renderOption: option => (
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
            <Box
              sx={{
                width: 20,
                height: 20,
                borderRadius: '50%',
                backgroundColor:
                  colorHexMap[option.value as LearningCertificateColor],
                flexShrink: 0,
              }}
            />
            {option.label}
          </Stack>
        ),
      }}
    />
  );
};

export default CertificateColorSelect;
