import { t } from '../../../i18n';
import styled from '@emotion/styled';
import { ChevronLeft20Regular } from '@fluentui/react-icons';
import { useBuilder } from '@tempi/core-editor';
import {
  buildComponentDict,
  BuilderComponent,
  PageBuilderResponse,
} from '@tempi/core-renderer';
import { Button, Divider, Space, Typography } from 'antd';
import { Device } from 'modules/builder';
import React from 'react';
interface PagePreviewProps {
  rightHeader?: React.ReactElement[];
  content?: PageBuilderResponse;
  onBack: () => void;
  components: {
    [key: string]: React.FC;
  };
}
export const DemoPreview: React.FC<PagePreviewProps> = ({
  content,
  rightHeader,
  onBack,
  components,
}) => {
  const demoComponents = buildComponentDict(components);
  const { device } = useBuilder();
  const renderBuilderComponent = () => {
    if (!content) return null;
    if (device === 'mobile') {
      return (
        <Device device="mobile">
          <BuilderComponent
            content={content}
            configs={{
              env: window?.config?.env,
              terminalCode: 'vnshop',
              device: 'mobile',
            }}
            componentDict={demoComponents}
          />
        </Device>
      );
    }
    if (device === 'tablet') {
      return (
        <Device device="tablet">
          <BuilderComponent content={content} componentDict={demoComponents} />
        </Device>
      );
    }
    return (
      <BuilderComponent
        content={content}
        configs={{
          env: window?.config?.env,
          terminalCode: 'vnshop',
          device: 'desktop',
        }}
        componentDict={demoComponents}
      />
    );
  };
  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>
      {renderBuilderComponent()}
    </>
  );
};
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;
  }
`;