import { InfoCircleOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';
import { useBuilder } from '@tempi/core-editor';
import { navigateToSmartActivationSite, UploadImage } from '@tempi/editor-site';
import {
  DatePicker,
  Form,
  Input,
  Modal,
  Select,
  Space,
  Switch,
  Tag,
} from 'antd';
import { LabelTooltipType } from 'antd/es/form/FormItemLabel';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import { ExtraBuilderState } from 'sites/smart-activation-editor/contexts';
import { SMART_ACTIVATION_EDITOR } from 'sites/wb-editor/router/path';
import useSWR from 'swr';
import { t } from '../../../i18n';
import { useSmartPopup, UseSmartPopupParams } from '../hooks';
import { PopupInterface } from '../type';
import { createNewSmartPopup } from '../utils';
import { smartPopupApi } from '../utils/api';

type SmartPopupDetailModalProps = UseSmartPopupParams & {
  open: boolean;
  onClose: () => void;
  onCloseDrawer?: () => void;
  mutatePopupList?: () => void;
};
type SmartPopupFormInterface = Pick<
  PopupInterface,
  | 'name'
  | 'allowPaths'
  | 'ignorePaths'
  | 'onlyNewVisitor'
  | 'segmentId'
  | 'thumbnailUrl'
> & {
  validTime?: dayjs.Dayjs[];
};
const { useForm, useWatch } = Form;
export const SmartPopupDetailModal = ({
  open,
  onClose,
  mutatePopupList,
  websiteId,
  smartPopupId,
  smartActivationClientAppId,
}: SmartPopupDetailModalProps) => {
  const [form] = useForm<SmartPopupFormInterface>();
  const onlyNewVisitor = useWatch('onlyNewVisitor', form);
  const { loadingSmartPopup, setLoadingSmartPopup } =
    useBuilder<ExtraBuilderState>();
  const { popupDetail, mutatePopup } = useSmartPopup({
    websiteId,
    smartPopupId,
    smartActivationClientAppId,
  });
  const { data: segments } = useSWR(
    '/smart-activation/popups/segments',
    async () => {
      return smartPopupApi
        .getAllSegment()
        .then((res) => res?.data?.data?.segments);
    },
    {
      revalidateOnFocus: false,
    },
  );
  const displaySegments = useMemo(() => {
    if (!segments?.length) return [];
    return segments.map((segment) => ({
      label: `${segment?.id} - ${segment?.name}`,
      value: segment?.id,
    }));
  }, [segments]);
  const onFinishForm = async (data: SmartPopupFormInterface) => {
    if (loadingSmartPopup) return;
    const { validTime, ...rest } = data;
    const _validTime = {
      startedAt: data.validTime[0].toISOString(),
      endedAt: data.validTime[1].toISOString(),
    };
    if (rest?.onlyNewVisitor) {
      rest.segmentId = null;
    }
    try {
      setLoadingSmartPopup(true);
      if (smartPopupId) {
        await smartPopupApi.upsertSmartPopup({
          id: popupDetail.id,
          ...rest,
          ..._validTime,
        });
        onClose();
        if (mutatePopupList) mutatePopupList();
        mutatePopup();
      } else {
        const content = createNewSmartPopup();
        const res = await smartPopupApi.upsertSmartPopup({
          clientAppId: smartActivationClientAppId,
          content,
          ...rest,
          ..._validTime,
        });
        const id = res?.data?.data?.id;
        if (id) {
          onClose();
          mutatePopupList();
          navigateToSmartActivationSite(
            SMART_ACTIVATION_EDITOR.replace(':popupId', id.toString()),
            {
              websiteId: websiteId,
              clientAppId: smartActivationClientAppId,
            },
          );
        }
      }
    } finally {
      setLoadingSmartPopup(false);
    }
  };
  useEffect(() => {
    const getPopupDetail = async () => {
      if (popupDetail && open) {
        const {
          name,
          ignorePaths,
          allowPaths,
          startedAt,
          endedAt,
          segmentId,
          thumbnailUrl,
          onlyNewVisitor,
        } = popupDetail;
        form.setFieldsValue({
          name,
          ignorePaths,
          allowPaths,
          validTime: [dayjs(startedAt), dayjs(endedAt)],
          thumbnailUrl,
          segmentId,
          onlyNewVisitor,
        });
      } else {
        form.resetFields([
          'name',
          'validTime',
          'onlyNewVisitor',
          'allowPaths',
          'ignorePaths',
          'segmentId',
          'thumbnailUrl',
        ]);
      }
    };
    getPopupDetail();
    // eslint-disable-next-line
  }, [open, popupDetail]);
  const tooltipUrl: LabelTooltipType = {
    title: (
      <>
        <p>
          {t(
            'Mẹo: bạn có thể thêm ký tự * để thiết lập điều kiện linh hoạt hơn',
          )}
        </p>
        <p>{t('word: tìm kiếm chính xác')}</p>
        <p>{t('*word*: URL có chứa chuỗi "word"')}</p>
        <p>{t('*word: URL kết thúc bằng chuỗi "word"')}</p>
        <p>{t('word*: URL bắt đầu bằng chuỗi "word"')}</p>
      </>
    ),
    icon: <InfoCircleOutlined />,
  };
  return (
    <Modal
      open={open}
      onCancel={() => onClose()}
      destroyOnClose
      title={t('Thông tin popup')}
      bodyStyle={{ height: 580, overflow: 'auto', padding: '0 1rem' }}
      cancelText={t('common.cancel')}
      cancelButtonProps={{ shape: 'round' }}
      okText={t('Lưu')}
      okButtonProps={{ shape: 'round', loading: loadingSmartPopup }}
      onOk={form.submit}
    >
      <Form
        form={form}
        colon={false}
        onFinish={onFinishForm}
        onValuesChange={(_, values) => {
          if (values.segmentId === undefined) {
            form.setFieldsValue({ segmentId: null });
          }
        }}
      >
        <Form.Item
          label={t('Tên popup')}
          labelCol={{ span: 24 }}
          name="name"
          rules={[
            {
              required: true,
              message: t('Vui lòng nhập tên popup'),
            },
          ]}
        >
          <Input placeholder={t('Tên popup')} />
        </Form.Item>
        <Form.Item
          label={t('Thời gian hiển thị')}
          labelCol={{ span: 24 }}
          name="validTime"
          rules={[
            {
              required: true,
              message: t('Vui lòng nhập thời gian hiển thị popup'),
            },
          ]}
        >
          <DatePicker.RangePicker
            showTime
            format="DD/MM/YYYY hh:mm:ss"
            className="w-100"
            changeOnBlur
          />
        </Form.Item>
        <Form.Item
          label={t('Chỉ hiển thị cho khách hàng mới')}
          name={'onlyNewVisitor'}
          valuePropName="checked"
        >
          <Switch style={{ float: 'right' }} />
        </Form.Item>
        {!onlyNewVisitor && (
          <Form.Item
            label={t('Phân khúc khách hàng')}
            name="segmentId"
            labelCol={{ span: 24 }}
          >
            <Select
              showSearch
              options={displaySegments}
              allowClear
              placeholder={t('Chọn segment')}
              optionFilterProp="children"
              filterOption={(input, option) =>
                `${option?.label}`.toLowerCase().includes(input.toLowerCase())
              }
            />
          </Form.Item>
        )}
        <Form.Item
          label={t('Hiện với URLs')}
          name="allowPaths"
          labelCol={{ span: 12 }}
          labelAlign="left"
          tooltip={tooltipUrl}
        >
          <UrlRegexInput />
        </Form.Item>
        <Form.Item
          label={t('Ẩn với URLs')}
          name="ignorePaths"
          labelCol={{ span: 12 }}
          labelAlign="left"
          tooltip={tooltipUrl}
        >
          <UrlRegexInput />
        </Form.Item>
        <Form.Item
          label={t('Ảnh thumbnail')}
          labelCol={{ span: 24 }}
          name="thumbnailUrl"
        >
          <UploadImage listType="picture-card" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
type UrlRegexInputProps = {
  onChange?: (e) => void;
  value?: string[];
};
const UrlRegexInput = ({ onChange, value }: UrlRegexInputProps) => {
  const [input, setInput] = useState('');
  const onAdd = (path) => {
    onChange([path, ...(value || [])]);
  };
  const onDelete = (path) => {
    onChange(value?.filter?.((_path) => _path !== path));
  };
  return (
    <>
      <Input
        value={input}
        placeholder={t('Nhập thông tin')}
        onChange={(e) => setInput(e.target.value)}
        onPressEnter={() => {
          if (input && !value?.includes?.(input)) {
            onAdd(input);
            setInput('');
          }
        }}
      />
      <Space wrap className="mt-half" size={'small'}>
        {value?.map?.((path, index) => (
          <StyledTag
            key={path + index}
            className="px-half py-quarter border-radius-999"
            closable
            onClose={() => onDelete(path)}
          >
            {path}
          </StyledTag>
        ))}
      </Space>
    </>
  );
};
const StyledTag = styled(Tag)`
  background-color: rgba(115, 103, 240, 0.1);
  border: none;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    max-width: unset;
  }
`;