import "./index.scss";
import React, { useState } from "react";
import { Button, Col, 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 { ShopifyProductItem } from "models/talent/talent-profile-module.model";
import { Icon } from "../Icon";
import { formatterCurrency } from "utils/currency";

interface Props {
  index?: number;
  item: ShopifyProductItem;
  showPrice?: boolean;
  disableDragDrop?: boolean;
  type: number;
  onEdit?: (item: ShopifyProductItem) => void;
  onDelete?: (item: ShopifyProductItem) => void;
  dragHandleProps?: DraggableProvidedDragHandleProps;
  active?: boolean;
}

const PRODUCT_TYPE_INDIVIDUAL = 1;

const ShopifyProductCard: React.FC<Props> = ({
  item,
  showPrice = true,
  disableDragDrop = false,
  dragHandleProps,
  type,
  onDelete,
}) => {
  const variant = item?.variants?.reduce(function (prev, curr) {
    return parseFloat(prev.price) < parseFloat(curr.price) ? prev : curr;
  });

  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

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

  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}
      />
      {item && (
        <div className="border-box d--flex shopify-product-card border__radius--8">
          <div className="shopify-product-card__picture">
            {item.images?.[0]?.src ? (
              <ImageSkeleton src={item.images?.[0]?.src as string} />
            ) : (
              <Row
                align="middle"
                justify="center"
                className="shopify-product-card__empty"
              >
                <Icon name="shopping-empty" />
              </Row>
            )}
          </div>
          <div className="shopify-product-card__info flex--1 d--flex flex__direction--column p__x--16 p__y--16">
            <Row align="middle">
              <Col flex="1">
                <Text preset="semibold16">{item.title}</Text>
                {showPrice && (
                  <div className="d--flex align__items--center justify__content--between m__t--4">
                    <Text preset="regular14" className="price">
                      {formatterCurrency(
                        variant.priceV2?.currencyCode,
                        2
                      ).format(parseFloat(variant?.priceV2.amount))}
                    </Text>
                  </div>
                )}
              </Col>
              <Col
                className={
                  type !== PRODUCT_TYPE_INDIVIDUAL ? undefined : "d--none"
                }
              >
                <Row wrap={false} gutter={16} align="middle">
                  <Col>
                    <Button
                      className="p--0 d--flex align__items--center height--24 min-h-auto"
                      type="link"
                      onClick={() => setShowDeleteConfirm(true)}
                    >
                      <Icon name="trash" />
                    </Button>
                  </Col>
                  <Col>
                    <DragDropButton
                      disabled={disableDragDrop}
                      className="p__x--0 p__y--0"
                      dragType="vertical"
                      dragHandleProps={dragHandleProps}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

export default ShopifyProductCard;
