import { Button, ButtonProps } from 'antd';
import React, { useState } from 'react';
import { useLicense } from 'modules/license/context';
import { ExpireLicenseModal } from '../ExpireLicenseModal';
import { t } from '@tempi/editor-site';
interface LicenseButtonProps extends ButtonProps {
  enableCheckLicense?: boolean;
  featureCodes: string[];
}
export const LicenseButton: React.FC<LicenseButtonProps> = ({
  enableCheckLicense = false,
  featureCodes,
  onClick,
  loading,
  ...rest
}) => {
  const [open, setOpen] = useState(false);
  const { checkValidLicense } = useLicense();
  const [isValidatingLicense, setIsValidatingLicense] = useState(false);
  const handleClickBtn: React.MouseEventHandler<HTMLAnchorElement> &
    React.MouseEventHandler<HTMLButtonElement> = async (
    e: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement, MouseEvent>,
  ) => {
    if (!enableCheckLicense) {
      onClick?.(e);
      return;
    }
    setIsValidatingLicense(true);
    const isValidLicense = await checkValidLicense(featureCodes);
    setIsValidatingLicense(false);
    if (isValidLicense) {
      onClick?.(e);
    } else {
      setOpen(true);
    }
  };
  return (
    <>
      <Button
        {...rest}
        onClick={handleClickBtn}
        loading={loading || isValidatingLicense}
      />
      <ExpireLicenseModal
        open={open}
        setOpen={setOpen}
        title={
          <>
            {t('need_upgrade_pro')}
            <br />
            {t('to_publish_page')}
          </>
        }
        description={t('Nâng cấp ngay để tiết kiệm lên tới 50%')}
        maskClosable={true}
        contentName="publishBtn"
      />
    </>
  );
};