import "./OnDemandCard.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 { OnDemandVideoItem } from "models/talent/talent-profile-module.model";
import LabelTooltip from "components/LabelTooltip/LabelTooltip";
import { useTypedSelector } from "redux/rootReducer";
import { selectExchangeRates } from "redux/User/selector";
import {
  formatPriceWithExchangeRate,
  formatterCurrencyEXRate,
} from "utils/currency";
import { Icon } from "../Icon";
import CardModuleAction from "../CardModuleAction";

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

const OnDemandCard: React.FC<Props> = ({
  item,
  showPrice = true,
  disableDragDrop = false,
  titleShortcut = false,
  dragHandleProps,
  onEdit,
  onDelete,
}) => {
  const exchangeRate = useTypedSelector(selectExchangeRates);

  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [visibleAction, setVisibleAction] = useState(false);
  const itemPrice = useMemo(() => {
    if (
      item.experiencePrice == 0 &&
      (item.gbpExperiencePrice == 0 || item.gbpExperiencePrice == undefined)
    )
      return "Free";
    if (
      item.experienceCreationCurrency?.toLowerCase() !==
      exchangeRate?.localCurrency.toLowerCase()
    ) {
      return formatPriceWithExchangeRate(
        item.gbpExperiencePrice || 0,
        exchangeRate
      );
    }
    return formatterCurrencyEXRate(exchangeRate).format(
      item.experiencePrice || 0
    );
  }, [item, exchangeRate]);

  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 video?"
        description="This video will be deleted and you can’t undo this action."
        handleConfirm={onDeleteConfirm}
      />
      <div className="border-box d--flex on-demand-card border__radius--8">
        <Row className="full-width" wrap={false} align="middle">
          <Col>
            <div className="on-demand-card__picture">
              <ImageSkeleton src={item.covers?.[0] as string} />
            </div>
          </Col>
          <Col flex="1">
            <Row className="p--16" wrap={false} align="middle">
              <Col flex="1">
                <LabelTooltip
                  preset="semibold16"
                  className="d--block"
                  label={item.name as string}
                  ellipsis={true}
                  maxLength={(item.name as string).length}
                  showTooltip={(item.name as string).length > 36}
                />
                {showPrice && (
                  <div className="d--flex align__items--center justify__content--between m__t--4">
                    <Text>{itemPrice}</Text>
                  </div>
                )}
              </Col>
              <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
                      disabled={disableDragDrop}
                      className="p__x--0 p__y--0"
                      dragType="vertical"
                      dragHandleProps={dragHandleProps}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </React.Fragment>
  );
};

export default OnDemandCard;
