import './ProductCardModule.scss'
import React, { useMemo, useState } from 'react'
import { Button, Col, Popover, Row } from 'antd'
import ImageSkeleton from 'components/ImageSkeleton'
import { Text } from 'components/Typography'
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'
import DragDropButton from 'components/Button/DragDropButton'
import ConfirmDeleteModal from 'components/ConfirmDeleteModal'
import { ProductItem } from 'models/talent/talent-profile-module.model'
import LabelTooltip from 'components/LabelTooltip/LabelTooltip'
import classNames from 'classnames'
import { formatterCurrency } from 'utils/currency'
import CardModuleAction from '../CardModuleAction'
import { Icon } from '../Icon'
import { BaseModuleProps } from 'redux/Common/types'
import ItemVisibilityToggle from 'pages/Profile/ModuleEditor/ItemVisibilityToggle'

interface Props extends BaseModuleProps {
  index?: number
  item: ProductItem
  loading?: boolean
  showPrice?: boolean
  showStatus?: boolean
  disableEdit?: boolean
  disableDelete?: boolean
  disableDragDrop?: boolean
  titleShortcut?: boolean
  onEdit?: (item: ProductItem) => void
  onDelete?: (item: ProductItem) => void
  dragHandleProps?: DraggableProvidedDragHandleProps
}

const ProductCardModule: React.FC<Props> = ({
  item,
  showPrice = true,
  disableEdit = false,
  disableDelete = false,
  titleShortcut = false,
  disableDragDrop = false,
  dragHandleProps,
  onEdit,
  onDelete,
  module
}) => {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [visibleAction, setVisibleAction] = useState(false)
  const productPrice = useMemo(() => {
    if (item.currency) {
      return formatterCurrency(item.currency, 2).format(item.price || 0)
    }

    return `$${item?.price}`
  }, [item])

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

  const priceTextClass = classNames({
    'product-card__info--content__price': true,
    'm__t--4': disableDragDrop
  })

  return (
    <React.Fragment>
      <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}
      />
      <div className="border-box d--flex product-card border__radius--8">
        <Row className="full-width" align="middle" wrap={false}>
          <Col>
            <div className="product-card__picture">
              <ImageSkeleton src={item.thumbnail as string} />
            </div>
          </Col>
          <Col flex="1">
            <Row
              className="p__x--16 p__y--16 full-width"
              wrap={false}
              align="middle"
            >
              <Col flex={'1'}>
                <LabelTooltip
                  preset="semibold16"
                  className="d--block"
                  label={item.title as string}
                  ellipsis={true}
                  maxLength={(item.title as string).length}
                  showTooltip={(item.title as string).length > 36}
                />
                {showPrice && (
                  <div className="d--flex align__items--center justify__content--between">
                    <Text className={priceTextClass}>{productPrice}</Text>
                  </div>
                )}
              </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
                          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={disableDragDrop}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </React.Fragment>
  )
}

export default ProductCardModule
