import { Form, Input, message, Modal, Radio, Select, Tabs } from 'antd';
import React, { useEffect } from 'react';
import {
  DesignMode,
  DomainTag,
  Page,
  PasswordSetting,
  SeoSocialForm,
  Status,
  t,
  languageCode,
} from '@tempi/editor-site';

interface PageSettingModalProps {
  visible: boolean;
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
  page: Page;
  loading: boolean;
  onSavePage: (data?: object, callback?: () => void) => any;
  handleChangeDesignMode: (designMode: DesignMode) => void;
  callbackCancel?: () => void;
  isTemplate?: boolean;
  enableLanguageSetting: boolean;
}
export const PageSettingModal: React.FC<PageSettingModalProps> = ({
  visible,
  setVisible,
  page,
  onSavePage,
  loading,
  handleChangeDesignMode,
  callbackCancel,
  isTemplate = false,
  enableLanguageSetting,
}) => {
  const { isGlobalWebsite } = window?.config || {};
  const [form] = Form.useForm<Page>();
  const watchDesignMode = Form.useWatch('designMode', form);
  const handleCloseModal = () => {
    setVisible(false);
    callbackCancel?.();
  };
  const { flagPB3498 } = window?.config || {};
  const onFinish = async (values: Page) => {
    try {
      if (values?.password === '') values.password = null;
      await onSavePage(values, () => {
        message.success(t('Cập nhật trang thành công'));
      });
      setVisible(false);
    } catch {}
  };
  useEffect(() => {
    if (visible) {
      form.setFieldsValue(page);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible]);
  useEffect(() => {
    if (visible) handleChangeDesignMode(watchDesignMode);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchDesignMode, visible]);
  const items = [
    {
      label: t('Cài đặt chung'),
      key: 'GENERAL_SETTING',
      children: (
        <>
          <Form.Item
            label={t('Tên trang')}
            name="name"
            rules={[
              { required: true, message: t('Vui lòng nhập tên trang') },
              {
                max: 255,
                message: t('Tên trang không được vượt quá 255 ký tự'),
              },
            ]}
          >
            <Input placeholder={t('Nhập tên trang')} />
          </Form.Item>
          {page?.status === Status.PUBLISHED && page?.domain && (
            <Form.Item>
              <div style={{ paddingBottom: 8 }}>{t('Tên miền')}</div>
              <DomainTag domain={page.domain} showSuccess />
            </Form.Item>
          )}
          {page?.status !== Status.DRAFT && !isTemplate && (
            <Form.Item
              label={t('Đường dẫn trang')}
              name="slug"
              rules={[
                {
                  required: !page?.domain,
                  message: t('Cần cấu hình slug ở trang xuất bản mặc định'),
                },
                {
                  max: 255,
                  message: t('Liên kết không được vượt quá 255 ký tự'),
                },
                {
                  pattern: /^[a-z0-9-]*$/i,
                  message: t("Liên kết chỉ chứa chữ, số và '-'"),
                },
              ]}
            >
              <Input
                addonBefore="/"
                placeholder={t('Nhập đường dẫn trang (Không bắt buộc)')}
              />
            </Form.Item>
          )}
          {page?.designMode !== DesignMode.ADAPTIVE && (
            <Form.Item label={t('Chế độ thiết kế')} name="designMode">
              <Radio.Group size="large">
                <Radio value={DesignMode.RESPONSIVE}>Responsive</Radio>
                <Radio value={DesignMode.MOBILE_ONLY}>Mobile only</Radio>
              </Radio.Group>
            </Form.Item>
          )}
          <SeoSocialForm form={form} visibleFields={['faviconUrl']} />
          {enableLanguageSetting && (
            <Form.Item
              label={t('Ngôn ngữ')}
              name={['extraInfo', 'languageCode']}
            >
              <Select
                placeholder={t('Chọn ngôn ngữ mặc định')}
                options={languageCode}
                getPopupContainer={(triggerNode) => triggerNode}
                defaultValue={isGlobalWebsite ? 'en' : 'vi'}
                showSearch
                filterOption={(input, option) =>
                  (option?.label ?? '')
                    .toLocaleLowerCase()
                    .includes(input.toLocaleLowerCase())
                }
              />
            </Form.Item>
          )}
        </>
      ),
    },
    {
      label: 'SEO',
      key: 'SEO_SETTING',
      children: (
        <SeoSocialForm
          form={form}
          showCount
          visibleFields={['metaTitle', 'metaDescription', 'metaKeywords']}
        />
      ),
    },
    {
      label: t('common_setting.social_image'),
      key: 'META_IMAGE_SETTING',
      children: <SeoSocialForm form={form} visibleFields={['metaImage']} />,
    },
    ...(flagPB3498
      ? [
          {
            label: t('common_setting.password'),
            key: 'PASSWORD_SETTING',
            children: (
              <PasswordSetting isProtected={page?.isProtected} form={form} />
            ),
          },
        ]
      : []),
    {
      label: t('Mã chuyển đổi'),
      key: 'CONVERSION_TRACKING_SETTING',
      children: (
        <SeoSocialForm
          form={form}
          visibleFields={[
            'tiktokPixelId',
            'facebookPixelId',
            'googleTagManagerId',
            'googleAnalyticsId',
            'googleAdsId',
          ]}
        />
      ),
    },
    {
      label: 'Javascript/CSS',
      key: 'JS_CSS_SETTING',
      children: (
        <>
          <SeoSocialForm
            form={form}
            visibleFields={['headContentHtml', 'bodyContentHtml']}
          />
        </>
      ),
    },
  ];
  return (
    <Modal
      open={visible}
      destroyOnClose={true}
      onCancel={handleCloseModal}
      zIndex={2002}
      confirmLoading={loading}
      onOk={form.submit}
      okText={t('Lưu')}
      cancelText={t('common.cancel')}
      cancelButtonProps={{ shape: 'round' }}
      okButtonProps={{ shape: 'round' }}
      width={730}
    >
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Tabs items={items} />
      </Form>
    </Modal>
  );
};