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

const { Title } = Typography

const WizardView = ({
  showSteps = true,
  steps,
  title = 'Wizard View',
  onSubmit,
  formValid,
  loading,
  sideBar = null,
  submitText = 'Done',
  progress = 0,
  actions = [],
  sideBarGrow = false,
  disabled = false
}) => {
  const [currentStep, setCurrentStep] = useState(0)
  const isMobile = useMediaQuery({ maxWidth: 768 })

  return (
    <Flex gap='middle' style={{ width: '100%' }}>
      {!isMobile && showSteps == true ? (
        sideBar != null ? (
          sideBar
        ) : (
          <div style={{ minWidth: sideBarGrow == true ? '100%' : '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'}
        style={
          sideBarGrow == false
            ? { width: '100%', minWidth: 0 }
            : isMobile
              ? { width: '100%', minWidth: 0 }
              : { width: '400px', minWidth: 0 }
        }
      >
        <Flex vertical gap='middle' style={{ flexGrow: 1, width: '100%' }}>
          <Title level={2} style={{ margin: 0 }}>
            {title}
          </Title>
          <div style={{ minHeight: '260px', marginBottom: 4, width: '100%' }}>
            {steps[currentStep].content}
          </div>
        </Flex>
        <Flex gap={'middle'} align='center' justify='end'>
          {progress > 0 ? (
            <Progress
              style={{ maxWidth: '160px' }}
              showInfo={false}
              percent={progress}
            />
          ) : null}
          {(actions || []).map((action) => {
            if (action.steps.includes(steps[currentStep].key)) {
              if (action.children) {
                return (
                  <Dropdown menu={{ items: action.children }} key={action.key}>
                    <Button
                      onClick={action?.onClick}
                      disabled={action?.disabled || disabled}
                      loading={action?.loading || false}
                    >
                      {action.label}
                    </Button>
                  </Dropdown>
                )
              }
              return (
                <Button
                  key={action.key}
                  onClick={action?.onClick}
                  disabled={action?.disabled || disabled}
                  loading={action?.loading || false}
                >
                  {action.label}
                </Button>
              )
            }
            return null
          })}

          <NewObjectButtons
            disabled={disabled}
            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>
    </Flex>
  )
}

WizardView.propTypes = {
  onSubmit: PropTypes.func.isRequired,
  formValid: PropTypes.bool.isRequired,
  steps: PropTypes.array.isRequired,
  showSteps: PropTypes.bool,
  title: PropTypes.string,
  loading: PropTypes.bool,
  disabled: PropTypes.bool,
  sideBar: PropTypes.node,
  submitText: PropTypes.string,
  progress: PropTypes.number,
  actions: PropTypes.array,
  sideBarGrow: PropTypes.bool
}

export default WizardView