import { Center, Box, Text, SegmentedControl, MantineColorScheme } from '@mantine/core';
import { SunIcon, MoonIcon, Icon, MonitorIcon } from '@phosphor-icons/react'
import { Trans, useLingui } from '@lingui/react/macro';
import { updateUserColorScheme } from '@/features/settings/server';
import { useAuth } from '@/contexts/auth-context';

interface ColorSchemeLabelProps {
  colorScheme: string;
  Icon: Icon;
}
const ColorSchemeLabel: React.FC<ColorSchemeLabelProps> = ({ colorScheme, Icon }) => {
  return (<Center style={{ gap: 10 }}>
      <Icon size={16} />
      <span>{colorScheme}</span>
    </Center>)
}

export function ColorSchemePicker() {
  const { metadata, user, set } = useAuth()
  const { t } = useLingui();

  const handleClick = async (value: string) => {
    if (user) {
      await updateUserColorScheme({ data: value });
      set({ metadata: { ...metadata, colorScheme: value as MantineColorScheme } })
    }
  }

  return (
    <Box>
      <Text fw={500} size='sm' mb='xs'><Trans>Color Scheme</Trans></Text>
      <SegmentedControl
        w='100%'
        value={metadata.colorScheme}
        onChange={handleClick}
        data={[
        {
          value: 'dark',
          label: <ColorSchemeLabel colorScheme={t`Dark`} Icon={MoonIcon} />
        },
        {
          value: 'light',
          label: <ColorSchemeLabel colorScheme={t`Light`} Icon={SunIcon} />
        },
        {
          value: 'auto',
          label: <ColorSchemeLabel colorScheme={t`System`} Icon={MonitorIcon} />
        },
      ]}
    />
    </Box>
  )
}
