import { Box, ColorSwatch, Group, Text } from '@mantine/core';
import { Trans } from '@lingui/react/macro';
import { updateUserAccentColor } from '@/features/settings/server';
import { useAuth } from '@/contexts/auth-context';

const colors = ['blue', 'red', 'green', 'yellow', 'grape', 'orange', 'pink', 'lime'];
interface ColorButtonProps {
  color: string;
  handleClick: (color: string) => void;
  isSelected: boolean;
}

const ColorButton = ({ color, handleClick, isSelected }: ColorButtonProps) => {
  return (
    <Box
      m={isSelected ? 0 :'0.125rem'}
      bd={isSelected ? '0.125rem solid var(--mantine-color-bright)' : 'none'}
      style={{ borderRadius: '50%' }}
    >
      <ColorSwatch
        component='button'
        color={`var(--mantine-color-${color}-6)`}
        onClick={() => handleClick(color)}
        size={28}
        m={2}
        style={{
          color: '#fff',
          cursor: 'pointer',
        }}
      />
    </Box>
  );
};

const AccentColorPicker = () => {
  const { metadata, user, set } = useAuth()

  const handleClick = async (color: string) => {
    if (user) {
      await updateUserAccentColor({ data: color });
      set({ metadata: { ...metadata, accentColor: color } })
    }
  }

  return (
    <Box>
      <Text fw={500} size='sm' mb='xs'><Trans>Accent Color</Trans></Text>
      <Group gap='xs' w='100%' justify='space-between'>
        {colors.map((color) => (
          <ColorButton
          key={color}
          color={color}
          handleClick={handleClick}
          isSelected={metadata.accentColor === color}
        />
      ))}
      </Group>
    </Box>
  );
}

export default AccentColorPicker;
