import React from 'react'
import { Button, Card, Col, Row } from 'antd'

import classNames from 'classnames'
import { Icon } from 'components/Icon'
import { Text } from 'components/Typography'

import { ModalStep } from 'redux/Shopify/types'
import { PODCAST_TYPE } from 'constants/module'

export interface IProps {
  type?: PODCAST_TYPE
  select?: (type: PODCAST_TYPE) => void
  close?: () => void
  callback?: () => void
}

const selectPodcastType = ({
  type,
  select,
  callback,
  close
}: IProps): ModalStep => {
  return {
    title: 'Add Podcast',
    content: (
      <>
        <Row
          className="select-youtube-type"
          justify="space-between"
          gutter={[24, 24]}
        >
          <Col span={12}>
            <Card
              className={classNames('cursor-pointer', {
                selected: type === PODCAST_TYPE.SYNC_LATEST
              })}
              onClick={() => select && select(PODCAST_TYPE.SYNC_LATEST)}
            >
              <div className="height--32">
                <Icon name="rotation" />
              </div>
              <Text
                preset="semibold18"
                className="d--block m__t--12 leading-28 m__b--4"
              >
                Sync Latest Podcasts
              </Text>
              <Text className="leading-22 text--grey4" preset="regular14">
                Keep your podcast module up-to-date with the latest content and
                get your episodes pulled automatically from Spotify and Apple
                Music
              </Text>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              className={classNames('cursor-pointer product-type-card', {
                selected: type === PODCAST_TYPE.INDIVIDUAL
              })}
              onClick={() => select && select(PODCAST_TYPE.INDIVIDUAL)}
            >
              <div className="height--32">
                <Icon name="microphone" />
              </div>
              <Text
                preset="semibold18"
                className="d--block m__t--12 leading-28 m__b--4"
              >
                Add Individual Episode
              </Text>
              <Text className="leading-22 text--grey4" preset="regular14">
                Share smart links to released podcast that drives your fans to
                multiple platforms, maximising streams and fan engagement
              </Text>
            </Card>
          </Col>
        </Row>
      </>
    ),
    footer: (
      <>
        <Row gutter={16} justify="end" align="middle">
          <Col>
            <Button
              className="height--52 width--160 text__transform--uppercase letter__spacing--1"
              type="default"
              block
              onClick={close}
              size="large"
            >
              CANCEL
            </Button>
          </Col>
          <Col>
            <Button
              className="height--52 width--160 text__transform--uppercase letter__spacing--1"
              type="primary"
              block
              onClick={callback}
              size="large"
            >
              Next
            </Button>
          </Col>
        </Row>
      </>
    )
  }
}

export default selectPodcastType
