import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { GlobalPacks } from './GlobalPacks';
import { UserPack } from './UserPack';
import { ImagePack } from '../../../plugins/custom-emoji';
import { ImagePackView } from '../../../components/image-pack-view';
import { SettingsPage } from '../SettingsPage';

type EmojisStickersProps = {
  requestClose: () => void;
};
export function EmojisStickers({ requestClose }: EmojisStickersProps) {
  const { t } = useTranslation();
  const [imagePack, setImagePack] = useState<ImagePack>();

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

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

  return (
    <SettingsPage title={t('Settings.emojis_stickers_title')} requestClose={requestClose}>
      <UserPack onViewPack={setImagePack} />
      <GlobalPacks onViewPack={setImagePack} />
    </SettingsPage>
  );
}
