import styled from '@emotion/styled';
import {
  CopyRegular,
  DeleteRegular,
  SettingsRegular,
} from '@fluentui/react-icons';
import {
  clonePageContent,
  resetGachaGameAndFormConfig,
  useBuilder,
} from '@tempi/core-editor';
import { transformNestedContent } from '@tempi/core-elements';
import { navigateToSmartActivationSite } from '@tempi/editor-site';
import { Badge, Button, Modal, notification, Space, Typography } from 'antd';
import defaultImage from 'assets/images/card_default_image.png';
import dayjs from 'dayjs';
import { PopupInterface, smartPopupApi } from 'modules/smart-activation';
import { Website } from 'modules/website';
import { useState } from 'react';
import { ExtraBuilderState } from 'sites/wb-editor/contexts';
import { SMART_ACTIVATION_EDITOR } from 'sites/wb-editor/router/path';
import { t } from '../../../i18n';
import { useInfiniteSmartPopup } from '../hooks';
const { Text } = Typography;
type PopupItemProps = {
  setShowModalSmartPopupSetting?: (newVal: boolean) => void;
  item: PopupInterface;
  onCloseDrawer?: () => void;
  website: Website;
};
export const PopupItem = ({
  item,
  setShowModalSmartPopupSetting,
  website,
}: PopupItemProps) => {
  const [hover, setHover] = useState(false);
  const { isActive, thumbnailUrl, name, startedAt, endedAt, id } = item;
  const { mutatePopups } = useInfiniteSmartPopup({
    clientAppId: website?.extraInfo?.smartActivationClientAppId,
  });
  const { setSmartPopupId } = useBuilder<ExtraBuilderState>();
  const onClickItem = () => {
    navigateToSmartActivationSite(
      SMART_ACTIVATION_EDITOR.replace(':popupId', id.toString()),
      {
        websiteId: website.id,
        clientAppId: website.extraInfo?.smartActivationClientAppId,
      },
    );
  };
  const onDelete = () => {
    Modal.confirm({
      title: t('Xóa bản ghi {{name}}?', { name: name }),
      centered: true,
      content: t('Popup sau khi bị xóa sẽ không thể khôi phục'),
      cancelText: t('common.cancel'),
      okText: t('Xác nhận'),
      onOk: async () => {
        try {
          await smartPopupApi.deletePopup(id);
          mutatePopups();
        } catch (e) {
          notification.error({
            message:
              e?.response?.data?.message ||
              t('Xóa popup không thành công, vui lòng thử lại sau'),
          });
        }
      },
    });
  };
  const onDuplicate = async () => {
    try {
      const { data } = await smartPopupApi.getSmartPopups({
        ids: id,
        clientAppId: website?.extraInfo?.smartActivationClientAppId,
      });
      const popup = data?.popups?.[0] as PopupInterface;
      if (!popup) throw new Error(t('Không tìm thấy popup {{id}}', { id: id }));
      const {
        name,
        startedAt,
        endedAt,
        thumbnailUrl,
        clientAppId,
        content,
        onlyNewVisitor,
        allowPaths,
        ignorePaths,
        segmentId,
      } = popup;
      const copyContent = clonePageContent(content, transformNestedContent);
      resetGachaGameAndFormConfig(copyContent);
      await smartPopupApi.upsertSmartPopup({
        name: `Copy of ${name}`,
        startedAt,
        endedAt,
        thumbnailUrl,
        clientAppId,
        onlyNewVisitor,
        isActive: false,
        allowPaths,
        ignorePaths,
        segmentId,
        content: copyContent,
      });
      mutatePopups();
    } catch (e) {
      notification.error({
        message:
          typeof e === 'string'
            ? e
            : e?.response?.data?.message ||
              t('Nhân bản popup không thành công, vui lòng thử lại sau'),
      });
    }
  };
  return (
    <div>
      <Image
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={onClickItem}
        className="mb-half w-100 cursor-pointer"
        src={thumbnailUrl || defaultImage}
        alt={name}
      />
      <div className="d-flex align-items-baseline px-half">
        <Badge className="mr-half" status={isActive ? 'success' : 'default'} />
        <Text {...(!isActive && { type: 'secondary' })} strong ellipsis>
          {item.name}
        </Text>
      </div>
      <Text
        onClick={onClickItem}
        className="px-half cursor-pointer"
        {...(!isActive && { type: 'secondary' })}
        style={{ fontSize: 12 }}
      >
        {`${dayjs(startedAt).format('DD/MM/YYYY hh:mm')} - 
        ${dayjs(endedAt).format('DD/MM/YYYY hh:mm')}`}
      </Text>
      {hover && (
        <Action
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <Button
            shape="circle"
            className="p-0 d-flex align-items-center justify-content-center"
            icon={<SettingsRegular fontSize={14} />}
            onClick={() => {
              setShowModalSmartPopupSetting(true);
              setSmartPopupId(id);
            }}
          />
          <Button
            shape="circle"
            className="p-0 d-flex align-items-center justify-content-center"
            icon={<CopyRegular fontSize={14} />}
            onClick={() => {
              onDuplicate();
            }}
          />
          <Button
            shape="circle"
            className="p-0 d-flex align-items-center justify-content-center"
            icon={<DeleteRegular fontSize={14} />}
            onClick={() => onDelete()}
          />
        </Action>
      )}
    </div>
  );
};
const Action = styled(Space)`
  position: absolute;
  top: 8px;
  right: 16px;
`;
const Image = styled.img`
  height: 180px;
  object-fit: contain;
  background-color: #f8f8fc;
`;