import { Col, Row } from 'antd'
import { Paragraph } from 'components/Typography'
import * as React from 'react'

import { PodcastItem } from 'models/talent/talent-profile-module.model'
import { ModalStep } from 'redux/Shopify/types'
import SyncLatestPodcastContent from './SyncLatestPodcastContent'
// import { validateSyncLatestPodcast } from "utils/validate";

export interface IProps {
  show?: boolean
  step?: number
  setStep?: (value: number) => void
  item?: PodcastItem
  cancellable?: boolean
  podcastLinks?: any[]
  setPodcastLinks?: (values: any[]) => void
  close?: () => void
  back?: () => void
  callback: (values: any, action?: any) => void
  onConnectSpotify?: () => void
}
const syncLatestPodcast = (props: IProps): ModalStep => {
  return {
    title: (
      <Row gutter={12} align="middle">
        <Col>
          <Paragraph preset="semibold20">
            {props.item ? 'Edit Latest Podcasts' : 'Sync Latest Podcasts'}
          </Paragraph>
        </Col>
        <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 ${props.step}/2`}</Paragraph>
          </Row>
        </Col>
      </Row>
    ),
    content: <SyncLatestPodcastContent {...props} />,
    footer: null
  }
}

export default syncLatestPodcast
