import { t } from '../../../i18n';
import styled from '@emotion/styled';
import { Add16Regular } from '@fluentui/react-icons';
import { useBuilder } from '@tempi/core-editor';
import { Button, Col, Row, Spin, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { Website } from 'modules/website';
import { useInfiniteSmartPopup } from '../hooks';
import { PopupItem } from './PopupItem';
import { SmartPopupDetailModal } from './SmartPopupDetailModal';
const { Text } = Typography;
interface SmartPopupSidebarProps {
  onCloseDrawer?: () => any;
  website: Website;
}
export const SmartPopupSidebar: React.FC<SmartPopupSidebarProps> = ({
  onCloseDrawer,
  website,
}) => {
  const [showModalSmartPopupSetting, setShowModalSmartPopupSetting] =
    useState(false);
  const { smartPopupId, setSmartPopupId } = useBuilder<{
    smartPopupId?: number;
    setSmartPopupId?: React.Dispatch<React.SetStateAction<number>>;
  }>();
  const {
    popups: popupList,
    hasMore,
    page,
    setPage,
    loading,
    mutatePopups,
  } = useInfiniteSmartPopup({
    clientAppId: website?.extraInfo?.smartActivationClientAppId,
  });
  useEffect(() => {
    mutatePopups();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <Wrapper>
      <InfiniteScroll
        dataLength={popupList?.length}
        style={{ overflowX: 'hidden', paddingBottom: 40 }}
        hasMore={hasMore}
        loader={
          page > 1 && <div className="text-center">{t('Tải thêm...')}</div>
        }
        next={() => setPage(page + 1)}
        height={'100%'}
      >
        <Spin spinning={loading}>
          <Text className="mb-base">
            {t('Quản lý tất cả popup của bạn tại đây')}
          </Text>
          <Row gutter={[16, 16]} className="my-base">
            {popupList?.map?.((item) => (
              <Col span={12} key={item.id}>
                <PopupItem
                  item={item}
                  website={website}
                  setShowModalSmartPopupSetting={setShowModalSmartPopupSetting}
                  onCloseDrawer={onCloseDrawer}
                />
              </Col>
            ))}
          </Row>
        </Spin>
      </InfiniteScroll>
      <div
        className="position-absolute w-100 d-flex justify-content-end p-half"
        style={{ bottom: 0, left: 0, backgroundColor: '#fff' }}
      >
        <Button
          icon={<Add16Regular />}
          shape="round"
          type="primary"
          className="d-flex align-items-center"
          onClick={() => {
            setShowModalSmartPopupSetting(true);
            setSmartPopupId(undefined);
          }}
        >
          {t('Thêm popup mới')}
        </Button>
      </div>
      {showModalSmartPopupSetting && (
        <SmartPopupDetailModal
          smartPopupId={smartPopupId}
          smartActivationClientAppId={
            website?.extraInfo?.smartActivationClientAppId
          }
          websiteId={website.id}
          open={showModalSmartPopupSetting}
          onClose={() => setShowModalSmartPopupSetting(false)}
          onCloseDrawer={onCloseDrawer}
          mutatePopupList={mutatePopups}
        />
      )}
    </Wrapper>
  );
};
const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;

  & > div {
    width: 100%;
  }
`;