import React, { useState } from 'react';
import { Box, Text, IconButton, Scroll, config, Switch } from 'folds';
import { Icon, Icons } from '../../../components/icons';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { SequenceCard } from '../../../components/sequence-card';
import { GlobalPacks } from './GlobalPacks';
import { UserPack } from './UserPack';
import { TelegramImport } from './TelegramImport';
import { ImagePack } from '../../../plugins/custom-emoji';
import { ImagePackView } from '../../../components/image-pack-view';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
import { SettingTile } from '../../../components/setting-tile';

type EmojisStickersProps = {
  requestClose: () => void;
};
export function EmojisStickers({ requestClose }: EmojisStickersProps) {
  const [imagePack, setImagePack] = useState<ImagePack>();
  const [autoConvertEmoticons, setAutoConvertEmoticons] = useSetting(settingsAtom, 'autoConvertEmoticons');

  const handleImagePackViewClose = () => {
    setImagePack(undefined);
  };

  if (imagePack) {
    return <ImagePackView address={imagePack.address} requestClose={handleImagePackViewClose} />;
  }

  return (
    <Page>
      <PageHeader outlined={false}>
        <Box grow="Yes" gap="200">
          <Box grow="Yes" alignItems="Center" gap="200">
            <Text size="H3" truncate>
              Emojis & Stickers
            </Text>
          </Box>
          <Box shrink="No">
            <IconButton onClick={requestClose} variant="Surface">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
        </Box>
      </PageHeader>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <Box direction="Column" gap="700">
              <Box direction="Column" gap="100">
                <Text size="L400">Options</Text>
                <SequenceCard variant="SurfaceVariant" direction="Column">
                  <SettingTile
                    title="Auto-convert Text Emoticons"
                    description="Automatically convert text emoticons like :) :D :( to emoji when sending messages."
                    after={
                      <Switch
                        variant="Primary"
                        value={autoConvertEmoticons}
                        onChange={setAutoConvertEmoticons}
                      />
                    }
                  />
                </SequenceCard>
              </Box>
              <UserPack onViewPack={setImagePack} />
              <GlobalPacks onViewPack={setImagePack} />
              <TelegramImport onViewPack={setImagePack} />
            </Box>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}
