/**
 * @Move (SQDP)
 * Only used by the Acknowledgements module - move to Acknowledgements/
 */
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import { getColorPaletteMapping } from '@material-hu/utils/colors';

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

import useAuth from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

type ColorInputSelectProps = {
  name: string;
};

export default function ColorInputSelect({ name }: ColorInputSelectProps) {
  const { t } = useLokaliseTranslation('backoffice_only');
  const HugoThemeProvider = useHuGoTheme();
  const { instance } = useAuth();
  const colorPalette = getColorPaletteMapping();

  const options = [
    {
      label: t('color_input_select.community_color'),
      value: instance?.color || '',
    },
    ...Object.entries(colorPalette).map(([label, value]) => ({
      label: t(`color_input_select.${label.toLowerCase()}`),
      value,
    })),
  ];

  return (
    <HugoThemeProvider>
      <HuFormInputSelect
        inputProps={{
          label: t('color_input_select.color'),
          options,
          placeholder: t('color_input_select.select_color'),
          renderOption: option => (
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 2,
              }}
            >
              <Box
                sx={{
                  width: 20,
                  height: 20,
                  backgroundColor: option.value,
                  borderRadius: 100,
                }}
              />
              {option.label}
            </Stack>
          ),
        }}
        name={name}
      />
    </HugoThemeProvider>
  );
}