import { useState } from 'react'
import PropTypes from 'prop-types'
import { Flex, Button } from 'antd'
import PlusIcon from '../../Icons/PlusIcon.jsx'
import MinusIcon from '../../Icons/MinusIcon.jsx'
import PanIcon from '../../Icons/PanIcon.jsx'
import PanFilledIcon from '../../Icons/PanFilledIcon.jsx'
import PDFViewer from './PDFViewer.jsx'

const PDFPreview = ({ file, loading = false, style }) => {
  const [previewScale, setPreviewScale] = useState(1)
  const [panMode, setPanMode] = useState(false)

  return (
    <Flex vertical gap={'middle'} style={{ height: '100%', ...style }}>
      <Flex gap={'small'}>
        <Button
          icon={
            panMode ? (
              <PanFilledIcon style={{ color: 'var(--color-primary)' }} />
            ) : (
              <PanIcon />
            )
          }
          disabled={loading}
          onClick={() => {
            setPanMode((prev) => !prev)
          }}
        />
        <Button
          icon={<PlusIcon />}
          onClick={() => {
            setPreviewScale((prev) => prev + 0.05)
          }}
          disabled={loading}
        />
        <Button
          icon={<MinusIcon />}
          onClick={() => {
            setPreviewScale((prev) => Math.max(0.1, prev - 0.05))
          }}
          disabled={loading}
        />
        <Button
          readOnly={true}
          style={{ width: '65px' }}
          disabled={loading}
          onClick={() => {
            setPreviewScale(1)
          }}
        >
          {previewScale.toFixed(2)}x
        </Button>
      </Flex>

      <div
        style={{
          flex: '1 1 auto',
          minHeight: 0,
          border: '1px solid #85858541'
        }}
      >
        <PDFViewer
          file={file}
          scale={previewScale}
          panMode={panMode}
          loading={loading}
        />
      </div>
    </Flex>
  )
}

PDFPreview.propTypes = {
  file: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(Blob),
    PropTypes.instanceOf(ArrayBuffer),
    PropTypes.object
  ]),
  loading: PropTypes.bool,
  style: PropTypes.object
}

export default PDFPreview