import { Center, IconButton, VStack } from '@chakra-ui/react';
import { Circle } from 'lucide-react';
import React from 'react';

import { getColorThemes } from '../layout/theme/color-themes';
import userOptionsStore from '../stores/UserOptionsStore';

import { useIsMobile } from './contexts/MobileContext';
import { toolbarButtonZIndex } from './toolbar/Toolbar';

export function ThemeSelectionOptions() {
  const children = [];

  const isMobile = useIsMobile();

  for (const theme of getColorThemes()) {
    children.push(
      <IconButton
        as="div"
        role="button"
        key={theme.name}
        onClick={() => userOptionsStore.selectTheme(theme.name)}
        size="xs"
        icon={
          <Circle
            size={!isMobile ? 16 : 20}
            stroke="transparent"
            style={{
              background: `conic-gradient(${theme.colors.background.primary.startsWith('#') ? theme.colors.background.primary : theme.colors.background.secondary} 0 50%, ${theme.colors.text.secondary} 50% 100%)`,
              borderRadius: '50%',
              boxShadow: '0 0 0.5px 0.25px #fff',
              cursor: 'pointer',
              transition: 'background 0.2s',
            }}
          />
        }
        bg="transparent"
        borderRadius="50%" // Ensures the button has a circular shape
        stroke="transparent"
        color="transparent"
        _hover={{
          svg: {
            transition: 'stroke 0.3s ease-in-out', // Smooth transition effect
          },
        }}
        zIndex={toolbarButtonZIndex}
      />,
    );
  }

  return (
    <VStack align={!isMobile ? 'end' : 'start'} p={1.2}>
      <Center>{children}</Center>
    </VStack>
  );
}