import styled from '@emotion/styled';
import { LicenseButton, Status } from '@tempi/editor-site';
import { Button, Modal, notification } from 'antd';
import { LICENSE_CODE_PUBLISH } from 'modules/license';
import { useNavigate } from 'react-router-dom';
import { t } from '../../../i18n';

interface PublishMenuInterface {
  publishPagePath?: string;
  pageId?: number;
  status: Status;
  trackingAttr?: object;
  content: object;
  onSavePage: (data?: object, callBack?: () => void) => Promise<void>;
}

export const PublishMenu = ({
  status,
  trackingAttr,
  content,
  onSavePage,
  publishPagePath,
  pageId,
}: PublishMenuInterface) => {
  const navigate = useNavigate();

  const onUnPublish = () => {
    Modal.confirm({
      zIndex: 2002,
      centered: true,
      okText: t('Dừng xuất bản'),
      cancelText: t('common.cancel'),
      title: t('Bạn muốn dừng xuất bản trang này?'),
      wrapClassName: 'centered-footer',
      onOk: () =>
        onSavePage({
          content,
          status: Status.DRAFT,
          slug: null,
          domainId: null,
        }).then(() =>
          notification.success({
            message: t('Dừng xuất bản thành công'),
          }),
        ),
    });
  };

  const onPublishToPreview = async () => {
    await onSavePage();
    navigate(
      `${publishPagePath.replace(':id', pageId?.toString())}${location.search}`,
    );
  };

  if (status === Status.PUBLISHED) {
    return (
      <UnPublishButton
        type="primary"
        onClick={onUnPublish}
        {...trackingAttr}
        data-testid="unpublish-page-button"
      >
        {t('Dừng xuất bản')}
      </UnPublishButton>
    );
  }

  return (
    <PublishButton
      enableCheckLicense={window.config?.flagPB2225}
      featureCodes={[LICENSE_CODE_PUBLISH]}
      type="primary"
      onClick={onPublishToPreview}
      {...trackingAttr}
      data-testid="publish-page-button"
    >
      {t('Xuất bản trang')}
    </PublishButton>
  );
};

const UnPublishButton = styled(Button)`
  height: 100% !important;
  border-radius: unset;
  font-weight: 500;
`;

const PublishButton = styled(LicenseButton)`
  height: 100% !important;
  border-radius: unset;
  font-weight: 500;
`;