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 { YOUTUBE_TYPE } from 'constants/module'

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

const selectYoutubeType = ({
  type,
  select,
  callback,
  close
}: IProps): ModalStep => {
  return {
    title: 'Add YouTube Content',
    content: (
      <>
        <Row
          className="select-youtube-type"
          justify="space-between"
          gutter={[24, 24]}
        >
          <Col span={12}>
            <Card
              className={classNames('cursor-pointer product-type-card', {
                selected: type === YOUTUBE_TYPE.INDIVIDUAL
              })}
              onClick={() => select && select(YOUTUBE_TYPE.INDIVIDUAL)}
            >
              <div className="height--32">
                <Icon name="youtube-individual" />
              </div>
              <Text
                preset="semibold18"
                className="d--block m__t--12 leading-28 m__b--4"
              >
                Individual Video
              </Text>
              <Text className="leading-22 text--grey4" preset="regular14">
                Choose a single video to be shown on the video module. If the
                video is not yet public, it will be hidden until its visibility
                status on YouTube changes.
              </Text>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              className={classNames('cursor-pointer product-type-card', {
                selected: type === YOUTUBE_TYPE.COLLECTION
              })}
              onClick={() => select && select(YOUTUBE_TYPE.COLLECTION)}
            >
              <div className="height--32">
                <Icon name="youtube-collection" />
              </div>
              <Text
                preset="semibold18"
                className="d--block m__t--12 leading-28 m__b--4"
              >
                Video Collection
              </Text>
              <Text className="leading-22 text--grey4" preset="regular14">
                Keep your video module up-to-date with the latest content,
                fetched automatically from a YouTube channel or playlist. You
                can only add one collection per module.
              </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 selectYoutubeType
