import styled from '@emotion/styled';
import { navigateWithClientInfo, useAuth } from '@tempi/auth';
import { t, useEditorTracking } from '@tempi/editor-site';
import { Button, Modal, Typography, Image, ModalProps } from 'antd';
import discountSvg from 'assets/images/discount.svg';
import React, { SetStateAction } from 'react';
interface ExpireLicenseModalProps
  extends Pick<ModalProps, 'maskClosable' | 'wrapProps' | 'maskStyle'> {
  open: boolean;
  setOpen?: React.Dispatch<SetStateAction<boolean>>;
  title: string | React.ReactNode;
  description: string;
  contentName: string;
  width?: number;
}

const { flagHiddenUpgradePlan } = window.config || {};

export const ExpireLicenseModal: React.FC<ExpireLicenseModalProps> = ({
  open,
  setOpen,
  maskClosable,
  title,
  description,
  contentName,
  width = 360,
  ...rest
}) => {
  const { getAttrTracking } = useEditorTracking();
  const { currentMerchant } = useAuth();
  const handleClickBtnUpgrade = () => {
    navigateWithClientInfo({
      origin: window.config?.tempiDomain,
      path: '/pricing',
      objSearchParams: {
        referer: window.location.href,
      },
      target: '_self',
    });
  };
  return (
    <StyledModal
      open={open}
      title={null}
      footer={null}
      maskClosable={maskClosable}
      closable={false}
      destroyOnClose
      onCancel={() => setOpen(false)}
      width={width}
      bodyStyle={{ padding: 32, textAlign: 'center' }}
      {...rest}
    >
      <Image src={discountSvg} width={100} preview={false} />
      <Typography.Title level={5} style={{ marginTop: 16 }}>
        {title}
      </Typography.Title>
      {!flagHiddenUpgradePlan && (
        <>
          <Typography.Text type="secondary" style={{ display: 'block' }}>
            {description}
          </Typography.Text>
          <Button
            onClick={handleClickBtnUpgrade}
            type="primary"
            danger
            style={{ marginTop: 16 }}
            {...getAttrTracking({
              regionName: 'upgradeLicensePopup',
              contentName,
              target: 'pricing screen',
              payload: { merchantId: currentMerchant?.id },
            })}
          >
            {t('Nâng cấp ngay')}
          </Button>
        </>
      )}
    </StyledModal>
  );
};
const StyledModal = styled(Modal)`
  .ant-modal-content {
    padding: 0;
    border-radius: 8px !important;
  }
`;