import { FC } from 'react';
import { Col } from 'components/layout';
import { RadioItemOptionsProps } from 'components/radio-item';
import { RadioItem } from 'components';
import { Account, AccountGroup } from 'icons';
import { IconProps } from 'icons/types';
import { useResponsiveLayout } from 'hooks';
import { RoomTypeEnum } from 'expo-schema';

const AccountIcon = (props: IconProps) => {
  return <Account width={20} height={20} {...props} />;
};
const GroupIcon = (props: IconProps) => {
  return <AccountGroup width={20} height={20} {...props} />;
};

const SpaceIcon = (props: IconProps) => {
  return <AccountGroup width={20} height={20} {...props} />;
};
const types: RadioItemOptionsProps[] = [
  {
    type: RoomTypeEnum.Direct,
    title: 'Direct',
    Icon: AccountIcon,
    caption: 'Create a one-on-one room for chat, audio, and video.',
    isSelected: true,
  },
  {
    type: 'GROUP',
    title: 'Group',
    Icon: GroupIcon,
    caption:
      'Create a chat, post, audio, or video room for a group of members you choose, separate from any space.',
    isSelected: false,
  },
  {
    type: 'SPACE',
    title: 'Space',
    Icon: SpaceIcon,
    caption:
      'Add a chat, post, audio, video, or streaming room to an existing space as a block. All space members who have access to the block will be able to join this room.',
    isSelected: false,
  },
];
export const Types: FC<TypesType> = ({ type: selectedItem, setRoomType }) => {
  const { isMobile } = useResponsiveLayout();

  const isItemSelected = (type: string | undefined) => {
    return type === selectedItem;
  };
  const outerHeight = isMobile ? undefined : 300;

  return (
    <Col mt="s" height={outerHeight}>
      {types.map((item) => (
        <RadioItem
          mb="l"
          key={item.title}
          setRadioItem={setRoomType}
          radioSize={20}
          avatarSize={50}
          isSelected={isItemSelected(item.type)}
          item={item}
        />
      ))}
    </Col>
  );
};

type TypesType = {
  type: string;
  setRoomType: (value: string) => void;
};