import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'

import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons'

const { Title } = Typography

const NewDocumentTemplate = ({ onOk }) => {
  const [currentStep, setCurrentStep] = useState(0)

  const isMobile = useMediaQuery({ maxWidth: 768 })

  return (
    <NewObjectForm
      type={'documentTemplate'}
      defaultValues={{ active: true, global: false }}
    >
      {({ handleSubmit, submitLoading, objectData, formValid }) => {
        const steps = [
          {
            title: 'Required',
            key: 'required',
            content: (
              <ObjectInfo
                type='documentTemplate'
                column={1}
                bordered={false}
                isEditing={true}
                required={true}
                objectData={objectData}
              />
            )
          },
          {
            title: 'Optional',
            key: 'optional',
            content: (
              <ObjectInfo
                type='documentTemplate'
                column={1}
                bordered={false}
                isEditing={true}
                required={false}
                visibleProperties={{ content: false, testObject: false }}
                objectData={objectData}
              />
            )
          },
          {
            title: 'Summary',
            key: 'summary',
            content: (
              <ObjectInfo
                type='documentTemplate'
                column={1}
                bordered={false}
                visibleProperties={{
                  _id: false,
                  createdAt: false,
                  updatedAt: false
                }}
                isEditing={false}
                objectData={objectData}
              />
            )
          }
        ]
        return (
          <Flex gap='middle'>
            {!isMobile && (
              <div style={{ minWidth: '160px' }}>
                <Steps
                  current={currentStep}
                  items={steps}
                  direction='vertical'
                  style={{ width: 'fit-content' }}
                />
              </div>
            )}

            {!isMobile && (
              <Divider type='vertical' style={{ height: 'unset' }} />
            )}

            <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
              <Title level={2} style={{ margin: 0 }}>
                New Document Template
              </Title>
              <div style={{ minHeight: '260px', marginBottom: 8 }}>
                {steps[currentStep].content}
              </div>
              <NewObjectButtons
                currentStep={currentStep}
                totalSteps={steps.length}
                onPrevious={() => setCurrentStep((prev) => prev - 1)}
                onNext={() => setCurrentStep((prev) => prev + 1)}
                onSubmit={() => {
                  handleSubmit()
                  onOk()
                }}
                formValid={formValid}
                submitLoading={submitLoading}
              />
            </Flex>
          </Flex>
        )
      }}
    </NewObjectForm>
  )
}

NewDocumentTemplate.propTypes = {
  onOk: PropTypes.func.isRequired,
  reset: PropTypes.bool
}

export default NewDocumentTemplate