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

const { Title } = Typography

const WizardView = ({
  showSteps = true,
  steps,
  title = 'Wizard View',
  onSubmit,
  formValid,
  loading
}) => {
  const [currentStep, setCurrentStep] = useState(0)
  const isMobile = useMediaQuery({ maxWidth: 768 })

  return (
    <Flex gap='middle'>
      {!isMobile && showSteps == true ? (
        <div style={{ minWidth: '160px' }}>
          <Steps
            current={currentStep}
            items={steps}
            direction='vertical'
            style={{ width: 'fit-content' }}
          />
        </div>
      ) : null}

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

      <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
        <Title level={2} style={{ margin: 0 }}>
          {title}
        </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={onSubmit}
          formValid={formValid}
          submitLoading={loading}
        />
      </Flex>
    </Flex>
  )
}

WizardView.propTypes = {
  onSubmit: PropTypes.func.isRequired,
  formValid: PropTypes.bool.isRequired,
  steps: PropTypes.array.isRequired,
  showSteps: PropTypes.bool,
  title: PropTypes.string,
  loading: PropTypes.bool
}

export default WizardView