import { AsqMeItem } from '@komi-app/profiles-sdk'
import { MdOutlineFileCopy as FileCopyOutlinedIcon } from 'react-icons/md'
import { Button, Col, Popover, Row } from 'antd'
import DragDropButton from 'components/Button/DragDropButton'
import CardModuleAction from 'components/CardModuleAction'
import ConfirmDeleteModal from 'components/ConfirmDeleteModal'
import { Icon } from 'components/Icon'
import LabelTooltip from 'components/LabelTooltip/LabelTooltip'
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 './AsqMeItemModule.scss'

interface Props extends BaseModuleProps {
  index?: number
  item: AsqMeItem
  loading?: boolean
  disableDrag?: boolean
  titleShortcut?: boolean
  disableDragDrop?: boolean
  onEdit?: (item: AsqMeItem) => void
  onDelete?: (item: AsqMeItem) => void
  dragHandleProps?: DraggableProvidedDragHandleProps
  hideAction?: boolean
  isInCollection: boolean
  disableItemVisibility?: boolean
}

const AsqMeItemModule: React.FC<Props> = ({
  item,
  disableDrag = false,
  dragHandleProps,
  onEdit,
  onDelete,
  hideAction = false,
  module,
  isInCollection,
  disableItemVisibility = false
}) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [visibleAction, setVisibleAction] = useState(false)

  const title = item.title

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

  const image = useMemo(() => {
    if (item.thumbnail) {
      return <img src={item.thumbnail} />
    }

    return <FileCopyOutlinedIcon size={24} />
  }, [item])

  return (
    <React.Fragment>
      {!hideAction && (
        <ConfirmDeleteModal
          show={showDeleteConfirm}
          toggleModal={() => setShowDeleteConfirm(false)}
          cancelLabel="No Thanks!"
          confirmLabel="Delete"
          title="Are you sure you want to delete this product?"
          description="This product will be deleted and you can’t undo this action."
          handleConfirm={onDeleteConfirm}
          width={520}
        />
      )}
      <div className="border-box d--flex asqme-item-card border__radius--8">
        <Row wrap={false} className="full-width">
          <Col className="asqme-item-card__picture">{image}</Col>
          <Col flex={'1'}>
            <Row
              className="asqme-item-card__content p__x--16 p__y--16 full-width"
              wrap={false}
              align="middle"
            >
              <Col flex="1">
                <LabelTooltip
                  preset="semibold16"
                  className="d--block"
                  ellipsis={{ rows: 1 }}
                  label={title as string}
                  maxLength={(title as string).length}
                  showTooltip={(title as string).length > 36}
                />
              </Col>
              {!isInCollection && (
                <Col>
                  <ItemVisibilityToggle
                    module={module}
                    item={item}
                    disabled={disableItemVisibility}
                  />
                </Col>
              )}
              {!hideAction && (
                <Col className={'p__l--24'}>
                  <Row wrap={false} gutter={16} align="middle">
                    <Col>
                      <Popover
                        visible={visibleAction}
                        placement="bottomRight"
                        overlayClassName="module-editor-overlay"
                        arrowContent={null}
                        content={
                          <CardModuleAction
                            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"
                          type="link"
                          onClick={() => setVisibleAction(true)}
                        >
                          <Icon name="more" />
                        </Button>
                      </Popover>
                    </Col>
                    <Col>
                      <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 AsqMeItemModule
