import { Divider } from 'components/divider';
import { Col, Container, Row } from 'components/layout';
import { Radio } from 'components/radio';
import { Text } from 'components/text';
import { Visible } from 'components/visible';
import { useTheme } from 'hooks';
import { useCallback } from 'react';
import { Sample } from './sample/Sample';

export const Theme = () => {
  const { themeMode, updateThemeMode } = useTheme();

  const preferences = [
    {
      id: 1,
      title: 'Sync with OS settings',
      variant: 'light',
      theme: null,
      caption: 'Automatically switch between light and dark themes when your system does.',
    },
    {
      id: 2,
      title: 'Light',
      variant: 'light',
      theme: 'light',
      caption: 'Automatically switch between light and dark themes when your system does.',
    },
    {
      id: 3,
      title: 'Dark',
      variant: 'dark',
      theme: 'dark',
      caption: 'Automatically switch between light and dark themes when your system does.',
    },
  ];

  const isActive = useCallback(
    (currentThemeMode) => {
      return currentThemeMode === themeMode;
    },
    [themeMode]
  );

  const handleThemeChange = useCallback(
    (newTheme) => {
      updateThemeMode(newTheme);
    },
    [updateThemeMode]
  );

  return (
    <Container flexShrink={1}>
      <Divider colorVariant="divider-02" size={1} />
      {preferences.map(({ title, id, caption, theme, variant }) => {
        return (
          <Container key={id}>
            <Row flexGrow={1}>
              <Visible if={id !== 1}>
                <Sample
                  setTheme={handleThemeChange}
                  theme={theme}
                  title={title}
                  variant={variant}
                />
              </Visible>
              <Visible if={id === 1}>
                <Radio
                  onPress={() => handleThemeChange(null)}
                  isActive={isActive(null)}
                  sizeVariant="extra-small"
                  colorVariant="title"
                  rightElement={
                    <Col my="s" ml="xs">
                      <Text variant="caption" color="title">
                        {title}
                      </Text>
                      <Text mt="3xs" variant="label">
                        {caption}
                      </Text>
                    </Col>
                  }
                />
              </Visible>
            </Row>
          </Container>
        );
      })}
    </Container>
  );
};