import { Divider } from 'components/divider';
import { Col, Container, Row } from 'components/layout';
import { RadioItem, RadioItemOptionsProps } from 'components/radio-item';
import { Switch } from 'components/switch';
import { Text } from 'components/text';
import { TextField } from 'components/text-field';
import { useResponsiveLayout } from 'hooks';
import { ChatFill, Mic, Post, VideoCamera } from 'icons';
import { IconProps } from 'icons/types';
import { FC, useCallback } from 'react';
import { RoomTypeEnum } from 'expo-schema';

const groups: RadioItemOptionsProps[] = [
  {
    type: RoomTypeEnum.Chat,
    title: 'Chat',
    Icon: (props: IconProps) => <ChatFill height={13} width={13} {...props} />,
    isSelected: true,
  },
  {
    type: RoomTypeEnum.Post,
    title: 'Post',
    Icon: (props: IconProps) => <Post height={12} width={12} {...props} />,
    isSelected: false,
  },
  {
    type: RoomTypeEnum.Audio,
    title: 'Audio',
    Icon: (props: IconProps) => <Mic height={12} width={12} {...props} />,
    isSelected: false,
  },
  {
    type: RoomTypeEnum.Video,
    title: 'Video',
    Icon: (props: IconProps) => <VideoCamera height={12} width={12} {...props} />,
    isSelected: false,
  },
];
export const Group: FC<GroupType> = ({
  type: selectedItem,
  setType,
  name,
  setName,
  topic,
  setTopic,
  recordAutomatically,
  hideRecordingsDefault,
  setRecordAutomatically,
  setHideRecordingsDefault,
}) => {
  const { isSmall, isMobile } = useResponsiveLayout();

  const direction = isSmall ? 'column' : 'row';
  const mt = direction === 'column' ? 's' : undefined;

  const isItemSelected = useCallback(
    (type: string | undefined) => {
      return type === selectedItem;
    },
    [selectedItem]
  );

  const getMarginLeft = useCallback(
    (index) => {
      return index === 0 || isSmall ? 0 : 'xs';
    },
    [isSmall]
  );
  const outerHeight = isMobile ? undefined : 300;

  return (
    <Col height={outerHeight}>
      <Container>
        <Container flexDirection={direction}>
          {groups.map((item, index) => (
            <RadioItem
              mt={mt}
              key={item.type}
              ml={getMarginLeft(index)}
              setRadioItem={setType}
              avatarSize={32}
              radioSize={15}
              isSelected={isItemSelected(item.type)}
              item={item}
            />
          ))}
        </Container>
        <Container>
          <Divider my="l" directionVariant="horizontal" colorVariant="divider-02" />
        </Container>
        <Container flexDirection={direction}>
          <Col flexGrow={1}>
            <Text variant="body" mb="2xs">
              Room Name
            </Text>
            <TextField
              sizeVariant="small"
              shapeVariant="round"
              variant="outline"
              colorVariant="base-02"
              placeholder="Room Name"
              value={name}
              onChangeText={setName}
            />
          </Col>
          <Container mx="2xs" mt="m" />
          <Col flexGrow={1}>
            <Text variant="body" mb="2xs">
              Topic
            </Text>
            <TextField
              sizeVariant="small"
              shapeVariant="round"
              variant="outline"
              colorVariant="base-02"
              placeholder="Topic"
              value={topic}
              onChangeText={setTopic}
            />
          </Col>
        </Container>
        <Container>
          <Divider my="l" directionVariant="horizontal" colorVariant="divider-02" />
        </Container>
        <Container justifyContent="space-between" flexDirection={direction}>
          <Row flexGrow={1}>
            <Switch
              value={recordAutomatically}
              onValueChange={setRecordAutomatically}
              circleSize={20}
              changeValueImmediately={true}
              innerCircleStyle={{
                height: 15,
                width: 15,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              switchBorderRadius={20}
              title="Record automatically"
              titlePosition="right"
            />
          </Row>
          <Container mx="2xs" mt="m" />
          <Row flexGrow={1}>
            <Switch
              value={hideRecordingsDefault}
              onValueChange={setHideRecordingsDefault}
              circleSize={20}
              changeValueImmediately={true}
              innerCircleStyle={{
                height: 15,
                width: 15,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              switchBorderRadius={20}
              title="Hide new recordings"
              titlePosition="right"
            />
          </Row>
        </Container>
      </Container>
    </Col>
  );
};

type GroupType = {
  type: RoomTypeEnum;
  name: string;
  topic: string;
  recordAutomatically: boolean;
  hideRecordingsDefault: boolean;
  setName: (value: string) => void;
  setType: (value: string) => void;
  setTopic: (value: string) => void;
  setRecordAutomatically: (value: boolean) => void;
  setHideRecordingsDefault: (value: boolean) => void;
};