import { Modal, Radio } from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import { useEffect, useState } from 'react';
import styled from 'styled-components';
import './Preview.module.css';

const DESKTOP_WIDTH = '800px';
const MOBILE_WIDTH = '323px';

const FullscreenModal = styled(Modal).attrs({ title: 'Preview' })`
  .ant-modal {
    max-width: unset !important;
    margin: unset !important;
  }
  .ant-modal-centered::before {
    content: unset !important;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ant-modal-body {
    margin: 0px auto;
  }
`;

const PreviewMode = styled.div`
  position: absolute;
  bottom: 24px;
  left: 24px;
`;

interface PreviewProps {
  visible: boolean;
  visibleChange: (visible: boolean) => void;
  inframeContent: string;
}

export const Preview = ({ visible, visibleChange, inframeContent }: PreviewProps) => {
  const [mode, setMode] = useState('desktop');

  const onChange = (e: RadioChangeEvent) => {
    if (e.target.value) {
      setMode(e.target.value);
    }
  };

  return (
    <FullscreenModal
      visible={visible}
      onCancel={() => visibleChange(false)}
      onOk={() => visibleChange(false)}
      width={'unset'}
      style={{ top: '0px', maxWidth: 'unset', paddingBottom: '0px', height: '100%' }}
      bodyStyle={{ height: '100%' }}
      maskStyle={{ height: '100%' }}
      destroyOnClose={true}
      footer={null}
    >
      <PreviewMode>
        <ModeSelect onChange={onChange} value={mode} />
      </PreviewMode>
      {inframeContent ? (
        <iframe
          title="Preview"
          style={{ margin: '0px auto' }}
          width={mode === 'desktop' ? DESKTOP_WIDTH : MOBILE_WIDTH}
          height="100%"
          srcDoc={inframeContent}
        />
      ) : null}
    </FullscreenModal>
  );
};

interface ModeSelectProps {
  onChange: (e: RadioChangeEvent) => void;
  value: string;
}

const ModeSelect = ({ onChange, value }: ModeSelectProps) => {
  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={value}
        options={[
          { label: 'desktop', value: 'desktop' },
          { label: 'mobile', value: 'mobile' },
        ]}
        buttonStyle="solid"
        optionType="button"
      />
    </>
  );
};