import { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { Flex, Section, Text } from '../../components';
import { UIComponentProps } from '../../components/types';
import { IThemeColors } from '../../theme';

type Props = {
};

export type ColorsProps = UIComponentProps<Props>;

export const Colors: React.FC<ColorsProps> = (props: ColorsProps) => {
  const theme = useContext(ThemeContext);
  const color: IThemeColors = theme.color;
  const keys = Object.keys(color);
  return (
    <Section>
      {keys.map((key) => (
        <Flex.Row key={key} gap="0">
          {Object.keys(color[key]).map(size => (
            <Flex key={size}
              position="relative"
              flexShrink="1"
              width={100 / 9 + '%'}
              aspectRatio={1}
              flexDirection="column"
              alignItems="center"
              justifyContent="center"
              backgroundColor={color[key][size]}
            >
              <Text variant="paragraph50" color={color[key][(parseInt(size) >= 500 ? '100' : '900')]} lineHeight="1.2">{key}-{size}</Text>
              <Text variant="paragraph30" color={color[key][(parseInt(size) >= 500 ? '100' : '900')]}>{color[key][size]}</Text>
            </Flex>
          ))}
        </Flex.Row>
      ))}
    </Section>
  );
};