import Button from 'antd/lib/button'
import Modal from 'components/Modal'
import { BandsintownItem } from 'models/talent/talent-profile-module.model'
import React, { useState } from 'react'
import './PodcastWarningModal.scss'
import { Col, Row } from 'antd'
import { Paragraph } from 'components/Typography'
import cloneDeep from 'lodash/cloneDeep'
export type BandsintownEditorModalFormValues = Pick<BandsintownItem, 'url'>

interface PodcastWarningModalProps {
  visible: boolean
  data: any
  onChangeVisible?: (value: boolean) => void
  onChangeAllowBypassWarning?: (value: boolean) => void
  onSubmit?: () => void
}

const BandsintownEditorModal: React.FC<PodcastWarningModalProps> = ({
  visible,
  data,
  onChangeVisible,
  onChangeAllowBypassWarning,
  onSubmit
}) => {
  const titleModelWarning = {
    DIFFERENT_PODCAST_NAME: 'Show Names Don’t Match',
    DIFFERENT_PODCAST_AUTHOR: 'Author / Publisher Names Don’t Match',
    DIFFERENT_PODCAST_EPISODES: 'Some Episode Names Don’t Match'
  }
  const contentModelWarning = {
    DIFFERENT_PODCAST_NAME:
      'We’ve noticed that the links added have different show names associated with them, do you still want to proceed?',
    DIFFERENT_PODCAST_AUTHOR:
      'We’ve noticed that the links added have different author / publisher names associated with them, do you still want to proceed?',
    DIFFERENT_PODCAST_EPISODES:
      'We’ve noticed that some of the episodes added have different names associated with them, which can impact cross matching between Apple Podcast and Spotify. This also applies to any future episodes with different names. Do you still want to proceed?'
  }
  const [stepWarning, setStepWarning] = useState(0)
  const handleClose = () => {
    onChangeVisible?.(false)
    setStepWarning(0)
  }
  const handleSubmit = async () => {
    const step = cloneDeep(stepWarning)
    if (stepWarning + 1 === data.messages.length) {
      onChangeAllowBypassWarning?.(true)
      onSubmit?.()
      handleClose()
    } else {
      setStepWarning(step + 1)
    }
  }

  return data && data.messages && data.messages.length > 0 ? (
    <React.Fragment>
      <Modal
        width={520}
        closable={false}
        centered
        className="podcast-warning-modal"
        title={
          <Row gutter={12} align="middle">
            <Col>
              <Paragraph preset="semibold20">
                {
                  titleModelWarning[
                    data.messages[stepWarning] as keyof typeof titleModelWarning
                  ]
                }
              </Paragraph>
            </Col>

            {data.multipleWarning && (
              <Col>
                <Row
                  align="middle"
                  justify="center"
                  className="bg--gray12 border__radius--4 p__x--8 height--24"
                >
                  <Paragraph
                    className="leading-22 text--tundola"
                    preset="medium14"
                  >{`STEP ${stepWarning + 1}/${
                    data.messages.length
                  }`}</Paragraph>
                </Row>
              </Col>
            )}
          </Row>
        }
        visible={visible}
        onCancel={handleClose}
        destroyOnClose
        maskClosable={false}
      >
        <div>
          {
            contentModelWarning[
              data.messages[stepWarning] as keyof typeof contentModelWarning
            ]
          }
          <div className="editor__actions m__t--24">
            <Button
              className="ant-btn-xl ant-btn-uppercase  m__r--16"
              onClick={() => handleClose()}
            >
              Cancel
            </Button>
            <Button
              className="ant-btn-xl ant-btn-uppercase"
              type="primary"
              onClick={() => handleSubmit()}
            >
              {stepWarning + 1 === data.messages.length ? 'Done' : 'Continue'}
            </Button>
          </div>
        </div>
      </Modal>
    </React.Fragment>
  ) : (
    <></>
  )
}

export default BandsintownEditorModal
