import { t } from '../../../i18n';
import { BorderOutsideThickRegular } from '@fluentui/react-icons';
import { SidebarDrawer, SidebarItem } from '@tempi/editor-site';
import { Website } from 'modules/website';
import { useState } from 'react';
import { SmartPopupSidebar } from './SmartPopupSidebar';
interface SmartPopupSettingProps {
  website: Website;
}
export const SmartPopupSetting: React.FC<SmartPopupSettingProps> = ({
  website,
}) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <SidebarItem
        onClick={() => setOpen(true)}
        trackingContentName="SmartPopupListBtn"
        tooltip={t('Quản lý Popup')}
        active={open}
      >
        <BorderOutsideThickRegular fontSize={24} />
      </SidebarItem>
      <SidebarDrawer
        title={t('Quản lý Popup')}
        open={open}
        onClose={() => setOpen(false)}
        width={520}
      >
        <SmartPopupSidebar
          website={website}
          onCloseDrawer={() => setOpen(false)}
        />
      </SidebarDrawer>
    </>
  );
};