import { Col, Row } from "antd";
import ImagePlaceholder from "components/ImagePlaceholder";
import LabelTooltip from "components/LabelTooltip/LabelTooltip";
import { OVERLAY_THEME } from "constants/profile-theme";
import React from "react";
import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { ShopMyShelfProduct } from "redux/Common/types";
import { useTypedSelector } from "redux/rootReducer";
import { selectTalentProfile } from "redux/User/selector";
import { TalentProfileThemeTypes } from "redux/User/types";
import DragDropButton from "../Button/DragDropButton";
import "./ShopMySelfProductCard.scss";

interface Props {
  index?: number;
  item: ShopMyShelfProduct;
  titleShortcut?: boolean;
  dragHandleProps?: DraggableProvidedDragHandleProps;
}

const ShopMySelfProductCard: React.FC<Props> = ({ item, dragHandleProps }) => {
  const talentProfile = useTypedSelector(selectTalentProfile);
  const overlayOptionActive =
    talentProfile?.themeColor?.overlayColor === OVERLAY_THEME.DARK.color
      ? TalentProfileThemeTypes.DARK
      : TalentProfileThemeTypes.LIGHT;

  const isDark = overlayOptionActive === TalentProfileThemeTypes.DARK;
  return (
    <React.Fragment>
      <div className="border-box d--flex shop-my-shelf-product-card border__radius--8">
        <Row
          align="middle"
          wrap={false}
          className="shop-my-shelf-product-card__wrapper"
        >
          <Col className="shop-my-shelf-product-card__picture full-height">
            <ImagePlaceholder src={item.image || ""} isDark={isDark} />
          </Col>
          <Col
            className="shop-my-shelf-product-card__right full-height"
            flex={"1"}
          >
            <Row
              className="shop-my-shelf-product-card__content p__x--16 p__y--16 full-height"
              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}
                />
              </Col>
            </Row>
          </Col>
          <DragDropButton
            className="p__x--0 p__y--0 d--none"
            dragType="vertical"
            dragHandleProps={dragHandleProps}
            disabled={true}
          />
        </Row>
      </div>
    </React.Fragment>
  );
};

export default ShopMySelfProductCard;
