import styled from '@emotion/styled';
import {
  AddBlock,
  BackIcon,
  Builder,
  BuilderConfig,
  BuilderHeader,
  Contact,
  DesignMode,
  DeviceSwitcher,
  DraggableElementsV2,
  EmptyBuilderMobile,
  ExpireLicenseModal,
  InstructionDocument,
  LoadingBuilder,
  MENU_ITEMS,
  PageInfo,
  RootEditor,
  Sidebar,
  SidebarItem,
  StyleMenu,
  TextButton,
  ReportMenu,
} from '@tempi/editor-site';
import { Helmet } from 'react-helmet';
import { isMobileOnly } from 'react-device-detect';
import React, { useState } from 'react';
import { PageSettingModal } from './PageSettingModal';
import { PopupSelection } from 'modules/popup';
import { useCustomComponent } from 'hooks';
import { allElementsExclude } from 'constants/elements';
import { PopupMenu } from 'modules/sidebar/menu/PopupMenu';
import { ContactBubbleMenu } from 'modules/sidebar/menu/ContactBubble';
import { SettingsFilled } from '@fluentui/react-icons';
import { useLandingPage } from '../hooks/useLandingPage';
import { PagePreview } from './PagePreview';
import { Dropdown, Spin, Switch } from 'antd';
import { PrevNext } from '@tempi/core-editor';
import { useTracking } from 'hooks/useTracking';
import { PublishMenu } from './PublishMenu';
import { t } from '../../../i18n';
import { SinglePageType, SINGLE_PAGE_EDITOR_PROPS } from '../constant';

const { isGlobalWebsite, flagPB4525 } = window?.config || {};
const excludeComponents = isGlobalWebsite
  ? [MENU_ITEMS.PRODUCT_LIST, MENU_ITEMS.EXAM_SCORE, MENU_ITEMS.LEAD_FORM]
  : [];

export interface PageEditorInterface {
  updatePageService: (id: any, body: any) => Promise<any>;
  getPageService: (
    id: any,
    params?: {
      device: any;
    },
  ) => Promise<any>;
  children?: React.ReactElement;
  singlePageType: SinglePageType;
}

export const PageEditor: React.FC<PageEditorInterface> = ({
  updatePageService,
  getPageService,
  singlePageType,
  children,
}) => {
  const {
    metaTitleDefault,
    publishPagePath,
    allowPublishedPage,
    enableBottomMenu,
    enableContactBubbleSetting,
    enableReportMenu,
    pageSettingProps,
    deviceSwitcherProps,
  } = SINGLE_PAGE_EDITOR_PROPS[singlePageType];
  const [isEditor, setIsEditor] = useState<boolean>(true);
  const { customComponents } = useCustomComponent();

  const {
    isDisabledEditor,
    isValidatingLicense,
    loadingInit: loadingGetPage,
    page,
    device,
    onChangeDevice,
    onSavePage,
    allowAutoSave,
    setAllowAutoSave,
    loading,
    getPageContent,
    visiblePageSettingModal,
    setVisiblePageSettingModal,
    designMode,
    onChangeDesignMode,
  } = useLandingPage({ updatePageService, getPageService });
  const { getAttrTracking } = useTracking();

  const onPreview = () => {
    setIsEditor(false);
  };

  const deviceSwitcherMenu = (
    <DeviceSwitcher
      device={device}
      onChangeDevice={onChangeDevice}
      mobileOnly={designMode === DesignMode.MOBILE_ONLY}
      disabled={isDisabledEditor}
      {...deviceSwitcherProps}
    />
  );

  const saveMenu = (
    <Dropdown
      arrow
      menu={{
        items: [
          {
            key: 'autoSave',
            icon: (
              <>
                <label style={{ marginRight: 8 }}>{t('Tự động lưu')}</label>
                <Switch
                  id="autoSave"
                  checked={allowAutoSave && !!page?.id}
                  onChange={() => setAllowAutoSave(!allowAutoSave)}
                />
              </>
            ),
          },
        ],
      }}
      placement="bottom"
      disabled={isDisabledEditor}
    >
      <SaveButton
        type="text"
        {...getAttrTracking({
          regionName: isEditor ? 'pageEditor' : 'pagePreview',
          contentName: 'saveBtn',
          target: isEditor ? 'pageBuilder' : 'pagePreview',
        })}
        onClick={() => onSavePage()}
        loading={loading}
      >
        {t('Lưu')}
      </SaveButton>
    </Dropdown>
  );

  const previewMenu = (
    <TextButton
      type="text"
      {...getAttrTracking({
        regionName: 'pageEditor',
        contentName: 'previewBtn',
        target: 'pagePreview',
      })}
      onClick={onPreview}
      disabled={isDisabledEditor}
    >
      {t('Xem trước')}
    </TextButton>
  );

  const publishMenu = allowPublishedPage
    ? [
        <PublishMenu
          status={page?.status}
          content={getPageContent()}
          trackingAttr={getAttrTracking({
            regionName: isEditor ? 'pageEditor' : 'pagePreview',
            contentName: 'publishBtn',
            target: 'popupPublish',
          })}
          onSavePage={onSavePage}
          publishPagePath={publishPagePath}
          pageId={page?.id}
        />,
      ]
    : [];

  const rightMenuPreview = [deviceSwitcherMenu, saveMenu, ...publishMenu];
  const rightMenu = [
    deviceSwitcherMenu,
    <PrevNext disabled={isDisabledEditor} />,
    saveMenu,
    previewMenu,
    ...publishMenu,
  ];

  const builderConfig: BuilderConfig = {
    builderHeader: (
      <BuilderHeader
        leftHeader={[
          <BackIcon />,
          <PageInfo
            pageName={page?.name}
            onEnd={(newName) => onSavePage({ name: newName })}
            url={page?.canonical}
          />,
        ]}
        rightHeader={rightMenu.filter(Boolean)}
      />
    ),
    content: getPageContent(),
    builderSidebar: (
      <Sidebar
        topMenu={[
          <AddBlock disabled={isDisabledEditor} />,
          <DraggableElementsV2
            elements={[
              ...allElementsExclude(excludeComponents),
              ...customComponents,
            ]}
            disabled={isDisabledEditor}
          />,
          <PopupMenu disabled={isDisabledEditor} />,
          <StyleMenu disabled={isDisabledEditor} />,
          ...(enableContactBubbleSetting
            ? [<ContactBubbleMenu disabled={isDisabledEditor} />]
            : []),
          ...(enableReportMenu && flagPB4525
            ? [<ReportMenu isLandingPage />]
            : []),
        ]}
        bottomMenu={
          enableBottomMenu
            ? [
                <Contact />,
                <InstructionDocument />,
                <SidebarItem
                  onClick={() => setVisiblePageSettingModal(true)}
                  trackingContentName={'SettingBtn'}
                  active={visiblePageSettingModal}
                  tooltip={t('Cài đặt trang')}
                  disabled={isDisabledEditor}
                >
                  <SettingsFilled fontSize={24} />
                </SidebarItem>,
              ]
            : []
        }
      />
    ),
    RootEditor,
  };

  return (
    <>
      <Helmet>
        <title>{page?.name || metaTitleDefault}</title>
      </Helmet>
      <LoadingBuilder
        hide={!(!page || loadingGetPage || isValidatingLicense)}
      />
      {!isMobileOnly && (
        <Spin spinning={loadingGetPage}>
          <Wrapper>
            {isEditor ? (
              <Builder config={builderConfig} />
            ) : (
              <PagePreview
                onBack={() => setIsEditor(true)}
                rightHeader={rightMenuPreview.filter(Boolean)}
                content={getPageContent()}
                page={page as any}
              />
            )}
          </Wrapper>
          <PageSettingModal
            loading={loading}
            visible={visiblePageSettingModal}
            setVisible={setVisiblePageSettingModal}
            page={{ ...page, designMode }}
            handleChangeDesignMode={(designMode) =>
              onChangeDesignMode(designMode)
            }
            onSavePage={onSavePage}
            callbackCancel={() => onChangeDesignMode(page?.designMode)}
            {...pageSettingProps}
          />
        </Spin>
      )}
      {isMobileOnly && <EmptyBuilderMobile />}
      <PopupSelection />
      <ExpireLicenseModal
        open={isDisabledEditor}
        maskClosable={false}
        title={t(
          'Bạn cần nâng cấp lên gói trả phí để lưu các thay đổi cho trang đã xuất bản',
        )}
        description={t('Nâng cấp ngay để cá nhân hóa trang của bạn')}
        contentName="licenseExpiredPopup"
        wrapProps={{ style: { zIndex: 950 } }}
        maskStyle={{ zIndex: 950 }}
      />
      {children}
    </>
  );
};

const Wrapper = styled.div`
  height: 100vh;
`;
const SaveButton = styled(TextButton)`
  display: flex;
  align-items: center;
  gap: 4px;

  &.disabled {
    cursor: default;
    color: var(--text-secondary-color) !important;
  }
`;