import { t } from '../../../i18n';
import styled from '@emotion/styled';
import { ChevronLeft20Regular } from '@fluentui/react-icons';
import { useBuilder } from '@tempi/core-editor';
import {
  buildComponentDict,
  GlobalData,
  PageBuilderResponse,
  RenderPage,
} from '@tempi/core-renderer';
import { components } from '@tempi/core-elements';
import { Button, Divider, Space, Typography } from 'antd';
import React from 'react';
import { Device } from '@tempi/editor-site';
interface PagePreviewProps extends GlobalData {
  rightHeader?: React.ReactElement[];
  content?: PageBuilderResponse;
  onBack: () => void;
}

const { flagPB3979, flagPB5049 } = window?.config || {};

export const PagePreview: React.FC<PagePreviewProps> = ({
  content,
  rightHeader,
  onBack,
  page,
}) => {
  const landingPageComponentDict = buildComponentDict({
    ...components,
  });
  const { device } = useBuilder();
  const renderBuilderComponent = () => {
    if (!content) return null;

    return (
      <Device device={device}>
        <RenderPage
          content={content}
          configs={{
            env: window?.config?.env,
            terminalCode: 'vnshop',
            device: device === 'tablet' ? 'desktop' : device,
            globalData: {
              page,
              isPreviewMode: true,
            },
            featureFlags: { flagPB3979, flagPB5049 },
          }}
          componentDict={landingPageComponentDict}
        />
      </Device>
    );
  };
  return (
    <>
      <Header className="d-flex justify-content-between align-items-center">
        <div className="w-30">
          <Button
            type="link"
            className="d-flex align-items-center"
            icon={<ChevronLeft20Regular />}
            onClick={() => onBack?.()}
            style={{
              color: 'var(--text-color)',
            }}
          >
            {t('Quay lại chế độ chỉnh sửa')}
          </Button>
        </div>
        <Typography.Title className="m-0" level={4}>
          {t('Chế độ xem trước')}
        </Typography.Title>
        <div className="d-flex align-items-center justify-content-end h-100 w-30">
          <StyleRightHeader
            split={
              <Divider
                type="vertical"
                style={{
                  height: '2em',
                  margin: 0,
                }}
              />
            }
          >
            {rightHeader?.map((item, index: number) =>
              React.cloneElement(item, { key: index }),
            )}
          </StyleRightHeader>
        </div>
      </Header>
      <WrapperIframe>{renderBuilderComponent()}</WrapperIframe>
    </>
  );
};
const Header = styled.div`
  height: 50px;
  position: sticky;
  background: var(--background-color);
  top: 0;
  z-index: 2000;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
`;
const StyleRightHeader = styled(Space)`
  height: 100%;
  .ant-space-item {
    height: 100%;
    display: flex;
    align-items: center;
  }
`;
const WrapperIframe = styled.span`
  .desktop {
    height: calc(100vh - 50px);
    overflow: hidden;
    top: 50px;
  }
  .tablet,
  .mobile {
    height: calc(100vh - 70px);
  }
  iframe {
    inset: unset !important;
  }
`;