import { ColorName } from '@emotion/react';
import { Avatar } from 'components/avatar';
import { Card } from 'components/card';
import { Divider } from 'components/divider';
import { Col, Container, Row, TouchableHighlight } from 'components/layout';
import { Radio } from 'components/radio';
import { Text } from 'components/text';
import { useProfile, useTheme } from 'hooks';
import { FC, useCallback } from 'react';
import { COLOR_VALUES } from 'theme/color';

export const Sample: FC<SampleProps> = ({ title, variant, theme, setTheme }) => {
  const { themeMode } = useTheme();
  const { profile } = useProfile();
  const bg = variant === 'light' ? COLOR_VALUES.light['base-01'] : COLOR_VALUES.dark.base;
  const titleColor =
    variant === 'light' ? COLOR_VALUES.light['grey-08'] : COLOR_VALUES.dark['grey-08'];

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

  return (
    <Container flexGrow={1} my="2xs">
      <TouchableHighlight underlayColor={'transparent'} onPress={() => setTheme(theme)}>
        <Card variant="outline" overflow="hidden" colorVariant="base">
          <Row p="s" backgroundColor={bg as ColorName}>
            <Avatar
              size={25}
              shapeVariant="square"
              colorVariant="base"
              uri={profile?.profilePhotoUrl as string}
              title={profile?.name.first}
            />
            <Col ml="s">
              <Row alignItems="center">
                <Text variant="title">
                  <Text
                    marginRight="3xs"
                    textBreakStrategy="balanced"
                    variant="caption"
                    color={titleColor as ColorName}
                  >
                    {profile?.name.first} {profile?.name.last}
                  </Text>
                  <Text variant="caption" color="body">
                    sent a chat message "Cool 👍" on the discussion
                  </Text>
                </Text>
              </Row>
              <Text flexShrink={1} mt="3xs" variant="caption" color="primary">
                Core Foundations
              </Text>
              <Text mt="xs" variant="caption-01">
                2s ago
              </Text>
            </Col>
          </Row>
          <Divider colorVariant="divider-02" />
          <Container p="s">
            <Radio
              isActive={isActive(theme)}
              onPress={() => setTheme(theme)}
              sizeVariant="2-extra-small"
              colorVariant="title"
              rightTitle={title}
              titleColor="title"
            />
          </Container>
        </Card>
      </TouchableHighlight>
    </Container>
  );
};

interface SampleProps {
  title: string;
  variant: string;
  theme: string | null;
  setTheme: (value: string | null) => void;
}