import { Button, Col, Popover, Row } from 'antd'
import classNames from 'classnames'
import DragDropButton from 'components/Button/DragDropButton'
import ConfirmDeleteModal from 'components/ConfirmDeleteModal'
import ImageSkeleton from 'components/ImageSkeleton'
import LabelTooltip from 'components/LabelTooltip/LabelTooltip'
import { Text } from 'components/Typography'
import { MusicItem } from 'models/talent/talent-profile-module.model'
import ItemVisibilityToggle from 'pages/Profile/ModuleEditor/ItemVisibilityToggle'
import React, { useMemo, useState } from 'react'
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'
import { BaseModuleProps } from 'redux/Common/types'
import CardModuleAction from '../CardModuleAction'
import { Icon } from '../Icon'
import './MediaCardModule.scss'
import { MusicReleaseType } from '@komi-app/shared-types'

interface Props extends BaseModuleProps {
  index?: number
  item: MusicItem
  loading?: boolean
  disableDragDrop?: boolean
  titleShortcut?: boolean
  disableDrag?: boolean
  deleteTitle?: string
  deleteSubTitle?: string
  onEdit?: (item: MusicItem) => void
  onDelete?: (item: MusicItem) => void
  onCopySmartLink?: (item: MusicItem) => void
  dragHandleProps?: DraggableProvidedDragHandleProps
}

export const getSubtitle = (item: MusicItem): string => {
  if (item?.metadata?.artists?.length) {
    return item.metadata.artists.map((item: any) => item.name).join(', ')
  }
  return item.metadata?.publisher || item?.links?.[0]?.url || ''
}

const MediaCardModule: React.FC<Props> = ({
  item,
  titleShortcut = false,
  disableDrag = false,
  dragHandleProps,
  onEdit,
  onDelete,
  deleteTitle,
  deleteSubTitle,
  onCopySmartLink,
  module
}) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [visibleAction, setVisibleAction] = useState(false)

  const subTitle = useMemo(() => getSubtitle(item), [item])

  const onDeleteConfirm = () => {
    typeof onDelete === 'function' && onDelete(item)
    setShowDeleteConfirm(false)
  }

  return (
    <React.Fragment>
      <ConfirmDeleteModal
        show={showDeleteConfirm}
        toggleModal={() => setShowDeleteConfirm(false)}
        cancelLabel="No Thanks!"
        confirmLabel="Delete"
        title={deleteTitle || 'Are you sure you want to delete this track?'}
        description={
          deleteSubTitle ||
          'This track will be deleted and you can’t undo this action.'
        }
        handleConfirm={onDeleteConfirm}
      />

      <div
        data-testid="media-card"
        className="border-box d--flex media-card border__radius--8"
      >
        <Row wrap={false} className="media-card__wrapper full-width">
          <Col className="media-card__picture">
            <ImageSkeleton
              src={
                item.metadata?.images?.[1]?.url ||
                (item.metadata?.images?.[0]?.url as string)
              }
            />
          </Col>
          <Col flex={'1'}>
            <Row
              align="middle"
              className="media-card__content p__y--16 p__x--16 full-width"
              wrap={false}
            >
              <Col flex="1">
                <Row className="full-width" wrap={false} align="middle">
                  <Col
                    className={classNames({
                      'media-card__title':
                        item.type === MusicReleaseType.PRE_SAVE
                    })}
                  >
                    <LabelTooltip
                      preset="semibold16"
                      className="d--block m__b--4"
                      label={(item.metadata?.name as string) || ''}
                      ellipsis={{ rows: 1 }}
                      maxLength={
                        ((item.metadata?.name as string) || '')?.length
                      }
                      showTooltip={
                        ((item.metadata?.name as string) || '')?.length > 32
                      }
                    />
                  </Col>

                  {item.type === MusicReleaseType.PRE_SAVE ? (
                    <Col className="m__l--8">
                      <Row
                        align="middle"
                        justify="center"
                        className="bg--grey height--24 width--71 border__radius--4"
                      >
                        <Text
                          className="text--grey4 leading-22"
                          preset="medium14"
                        >
                          Pre-save
                        </Text>
                      </Row>
                    </Col>
                  ) : null}
                </Row>
                <LabelTooltip
                  preset="regular14"
                  className="d--block  text--grey4 media-card__title"
                  label={subTitle as string}
                  ellipsis={{ rows: 1 }}
                  maxLength={(subTitle as string).length}
                  showTooltip={(subTitle as string).length > 36}
                />
              </Col>
              <Col className="p__l--24">
                <Row wrap={false} gutter={16} align="middle">
                  <Col>
                    <ItemVisibilityToggle module={module} item={item} />
                  </Col>
                  <Col>
                    <Popover
                      visible={visibleAction}
                      placement="bottomRight"
                      overlayClassName="module-editor-overlay"
                      arrowContent={null}
                      content={
                        <CardModuleAction
                          copySmartLink={!!item.id}
                          onCopyLink={() => onCopySmartLink?.(item)}
                          onEdit={() => onEdit?.(item)}
                          onDelete={() => setShowDeleteConfirm(true)}
                          toggleVisible={setVisibleAction}
                        />
                      }
                      trigger={['click']}
                      onVisibleChange={setVisibleAction}
                    >
                      <Button
                        className="p--0 d--flex align__items--center height--24 min-h-auto"
                        role="more"
                        type="link"
                        onClick={() => setVisibleAction(true)}
                      >
                        <Icon name="more" />
                      </Button>
                    </Popover>
                  </Col>
                  <Col role="drag">
                    <DragDropButton
                      className="p__x--0 p__y--0"
                      dragType="vertical"
                      dragHandleProps={dragHandleProps}
                      disabled={disableDrag}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </React.Fragment>
  )
}

export default MediaCardModule
