import { Alert, Button, Col, Row } from 'antd'
import ConfirmDeleteModal from 'components/ConfirmDeleteModal'
import { Icon } from 'components/Icon'
import LoadingModule from 'components/LoadingModule'
import { Paragraph } from 'components/Typography'
import YoutubeVideoCardModule from 'components/YoutubeVideoCardModule'
import { URL_YOUTUBE_CHANNEL_REG } from 'constants/regexp'
import take from 'lodash/take'
import {
  BaseItem,
  YoutubeItem
} from 'models/talent/talent-profile-module.model'
import * as React from 'react'
import { useCallback, useMemo, useState, useEffect } from 'react'
import { BaseModuleProps } from 'redux/Common/types'
import './YoutubeCollectionItem.scss'

interface YoutubeCollectionItemProps extends BaseModuleProps {
  item: YoutubeItem
  loading?: boolean
  onDelete?: (item: YoutubeItem) => void
  collection?: any
  active?: boolean
}

const YoutubeCollectionItem = ({
  item,
  onDelete,
  loading,
  collection,
  active = false,
  module
}: YoutubeCollectionItemProps) => {
  const isChannel = URL_YOUTUBE_CHANNEL_REG.test(item.url as string)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [showMore, setShowMore] = useState(active)
  const items = useMemo(() => {
    if (!collection) {
      return []
    }
    return showMore ? collection.items : take(collection.items, 2)
  }, [showMore, collection])
  const onClickDelete = useCallback(event => {
    event.stopPropagation()
    setShowDeleteConfirm(true)
  }, [])

  const onConfirmDelete = useCallback(() => {
    setShowDeleteConfirm(false)
    onDelete?.(item)
  }, [onDelete, item])
  const onClickAction = useCallback(event => {
    //setShowMore((value) => !value);
    setShowMore(true)
    event.isPropagationStopped()
  }, [])
  useEffect(() => {
    setShowMore(active as boolean)
  }, [active])
  const renderContent = () => {
    if (loading) {
      return <LoadingModule />
    }
    if (!collection?.items?.length) {
      return (
        <div className="youtube-collection-item__content">
          <Row gutter={[10, 10]} justify="center" className="p__t--24 ">
            <div className="max-w-393">
              <Col span={24} className="text__align--center">
                <Icon name="empty-module" />
              </Col>
              <Col span={24} className="text__align--center">
                <Paragraph preset="semibold18" className="d--block m__b--4">
                  No Videos Found
                </Paragraph>
                <Paragraph className="opacity--60 leading-22 ">
                  It appears that you have no videos in this YouTube collection
                  right now. Try adding videos on your youtube page or edit your
                  collection link.
                </Paragraph>
              </Col>
            </div>
          </Row>
        </div>
      )
    }
    return (
      <div className="youtube-collection-item__content">
        <Row
          gutter={16}
          wrap={false}
          className="m__b--10"
          align="middle"
          justify="space-between"
        >
          <Col flex={'1'}>
            <Paragraph ellipsis={true} preset="semibold16">
              {collection?.title}
            </Paragraph>
          </Col>
          <Col>
            <Paragraph
              ellipsis={true}
              className="opacity--06"
              preset="medium14"
            >
              {collection?.items?.length}{' '}
              {collection?.items?.length > 1 ? 'videos' : 'video'}
            </Paragraph>
          </Col>
        </Row>
        {items.map((item: any, index: number) => (
          <div className="p__y--10" key={`${module.id}-${index}`}>
            <YoutubeVideoCardModule
              key={index}
              item={item}
              hideAction={true}
              module={module}
              isInCollection={true}
            />
          </div>
        ))}
        {!showMore &&
          collection.items?.length &&
          collection.items?.length > 2 && (
            <Row className="m__t--10" justify="end">
              <Col>
                <Button onClick={onClickAction} type="text" className="p--0">
                  <Paragraph preset="medium14" className="opacity--06">
                    {!showMore && `+${collection.items?.length - 2} More`}
                  </Paragraph>
                </Button>
              </Col>
            </Row>
          )}
      </div>
    )
  }
  return (
    <div className="youtube-collection-item" onClick={onClickAction}>
      <ConfirmDeleteModal
        show={showDeleteConfirm}
        toggleModal={() => setShowDeleteConfirm(false)}
        cancelLabel="No Thanks!"
        confirmLabel="Delete"
        title="Are you sure you want to delete this collection?"
        description="The collection will be deleted from your Komi profile and you can’t undo this action."
        handleConfirm={onConfirmDelete}
        width={520}
      />
      <Alert
        message={undefined}
        className={'m__b--20 p__x--8 p__y--8 bg--darkGray'}
        description={
          'This module contains a collection. To add another collection or individual videos, create a new YouTube video module.'
        }
        icon={<Icon name="info" />}
        showIcon
        closeText={<Icon width={24} height={24} name="close-outline" />}
      />
      <Row className="m__b--20" justify="space-between" align="middle">
        <Col>
          <Paragraph preset="semibold18">
            {isChannel
              ? 'Videos From YouTube Channel'
              : 'Videos From YouTube Playlist'}
          </Paragraph>
        </Col>
        <Col className="height--24">
          <Button onClick={onClickDelete} className="p--0" type="text">
            <div className="height--24">
              <Icon name="trash" />
            </div>
          </Button>
        </Col>
      </Row>
      {renderContent()}
    </div>
  )
}

export default YoutubeCollectionItem
