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,
  sideBar = null,
  submitText = 'Done'
}) => {
  const [currentStep, setCurrentStep] = useState(0)
  const isMobile = useMediaQuery({ maxWidth: 768 })

  return (
    <Flex gap='middle'>
      {!isMobile && showSteps == true ? (
        sideBar != null ? (
          sideBar
        ) : (
          <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 justify='space-between' gap={'middle'}>
        <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
          <Title level={2} style={{ margin: 0 }}>
            {title}
          </Title>
          <div style={{ minHeight: '260px', marginBottom: 4 }}>
            {steps[currentStep].content}
          </div>
        </Flex>
        <NewObjectButtons
          currentStep={currentStep}
          totalSteps={steps.length}
          onPrevious={() => setCurrentStep((prev) => prev - 1)}
          onNext={() => setCurrentStep((prev) => prev + 1)}
          onSubmit={onSubmit}
          formValid={formValid}
          submitLoading={loading}
          submitText={submitText}
        />
      </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,
  sideBar: PropTypes.node,
  submitText: PropTypes.string
}

export default WizardView
