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

const { Title } = Typography

const WizardView = ({
  sizeBarWidth = '160px',
  showSteps = true,
  steps,
  title = 'Wizard View',
  onSubmit,
  formValid,
  loading,
  sideBar = null,
  submitText = 'Done',
  progress = 0,
  actions = [],
  sideBarGrow = false,
  disabled = false,
  showButtons = true,
  showTitle = true,
  currentStep: controlledCurrentStep,
  currentSubStep = 0,
  onStepChange,
  showSkipButton = false,
  onSkip = () => {}
}) => {
  const [internalCurrentStep, setInternalCurrentStep] = useState(0)
  const currentStep = controlledCurrentStep ?? internalCurrentStep
  const isMobile = useMediaQuery({ maxWidth: 768 })

  const setCurrentStep = (step) => {
    if (controlledCurrentStep === undefined) {
      setInternalCurrentStep(step)
    }
    onStepChange?.(step)
  }

  return (
    <Flex gap='middle' style={{ width: '100%' }}>
      {!isMobile && showSteps == true ? (
        sideBar != null ? (
          sideBar
        ) : (
          <div
            style={{ minWidth: sideBarGrow == true ? '100%' : sizeBarWidth }}
          >
            <Steps
              current={currentStep}
              items={steps.map(({ subSteps, ...step }, index) => ({
                ...step,
                description: subSteps ? (
                  <Timeline
                    className='subSteps'
                    items={subSteps.map((subStep, subStepIndex) => {
                      const complete =
                        index < currentStep ||
                        (index === currentStep && subStepIndex < currentSubStep)
                      const current =
                        index === currentStep && subStepIndex === currentSubStep

                      const disabled = index < currentStep
                      return {
                        ...subStep,
                        children: subStep.title,
                        dot: complete ? (
                          <div
                            className={`subSteps-dot ${disabled ? 'subSteps-dot-disabled' : ''}`}
                          >
                            <CheckIcon
                              style={{
                                fontSize: '5px',
                                marginTop: '0px',
                                marginRight: '0px',
                                color: disabled
                                  ? 'var(--color-primary)'
                                  : 'var(--layout-modal-bg)'
                              }}
                            />
                          </div>
                        ) : undefined,
                        color: complete ? 'blue' : current ? 'blue' : 'gray'
                      }
                    })}
                  />
                ) : (
                  step.description
                ),
                icon:
                  index < currentStep ? (
                    <div className='ant-steps-item-icon'>
                      <CheckIcon />
                    </div>
                  ) : (
                    step.icon
                  )
              }))}
              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%' }}>
          {showTitle ? (
            <Title level={2} style={{ margin: '0 0 8px 0', lineHeight: 0.7 }}>
              {title}
            </Title>
          ) : null}
          <div style={{ minHeight: '260px', marginBottom: 4, width: '100%' }}>
            {steps[currentStep].content}
          </div>
        </Flex>
        {showButtons || progress > 0 || actions.length > 0 ? (
          <Flex
            gap={'middle'}
            align='center'
            justify={showSkipButton ? 'space-between' : 'end'}
          >
            {showSkipButton && showButtons && (
              <Button onClick={onSkip} disabled={disabled}>
                Skip
              </Button>
            )}

            <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
              })}

              {showButtons && (
                <NewObjectButtons
                  disabled={disabled}
                  currentStep={currentStep}
                  totalSteps={steps.length}
                  onPrevious={() => setCurrentStep(currentStep - 1)}
                  onNext={() => setCurrentStep(currentStep + 1)}
                  onSubmit={onSubmit}
                  formValid={formValid}
                  submitLoading={loading}
                  submitText={submitText}
                />
              )}
            </Flex>
          </Flex>
        ) : null}
      </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,
  showButtons: PropTypes.bool,
  showTitle: PropTypes.bool,
  currentStep: PropTypes.number,
  currentSubStep: PropTypes.number,
  onStepChange: PropTypes.func,
  showSkipButton: PropTypes.bool,
  onSkip: PropTypes.func,
  sizeBarWidth: PropTypes.string
}

export default WizardView
