import { Button, Col, Popover, Row } from "antd";
import DragDropButton from "components/Button/DragDropButton";
import ConfirmDeleteModal from "components/ConfirmDeleteModal";
import LabelTooltip from "components/LabelTooltip/LabelTooltip";
import { InstagramReelItem } from "models/talent/talent-profile-module.model";
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 { convertHTMLEntity } from "utils/string";
import CardModuleAction from "../CardModuleAction";
import { Icon } from "../Icon";
import "./InstagramReelsCardModule.scss";
import { SocialIcon, SocialLinkType } from "@komi-app/creator-ui";

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

const MAX_TITLE_LENGTH = 200;

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

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

  const title = useMemo(() => {
    let title = "";

    // if (metadata?.type === "unavailable") {
    //   title = "Video unavailable";
    // }

    // if (metadata?.type === "video" && metadata.title) {
    //   title = metadata.title;
    // }

    if (title.length > MAX_TITLE_LENGTH) {
      title = title.slice(0, MAX_TITLE_LENGTH) + "...";
    }

    return convertHTMLEntity(title);
  }, []);

  const icon = useMemo(() => {
    // if (metadata?.type === "unavailable") {
    //   return <Icon name="module-warning" />;
    // }

    // if (metadata?.type === "video" && metadata.thumbnail_url) {
    //   return <img src={metadata.thumbnail_url} />;
    // }

    return <SocialIcon social={SocialLinkType.INSTAGRAM} mode="color" />;
  }, []);

  return (
    <React.Fragment>
      {!hideAction && (
        <ConfirmDeleteModal
          show={showDeleteConfirm}
          toggleModal={() => setShowDeleteConfirm(false)}
          cancelLabel="No Thanks!"
          confirmLabel="Delete"
          title="Are you sure you want to delete this Instagram Reel?"
          description="This Reel will be deleted and you can’t undo this action."
          handleConfirm={onDeleteConfirm}
          width={520}
        />
      )}
      <div className="border-box d--flex reels-video-card border__radius--8">
        <Row wrap={false} className="full-width">
          <Col className="reels-video-card__picture">{icon}</Col>
          <Col flex={"1"}>
            <Row
              className="reels-video-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}
                />
                <LabelTooltip
                  preset="regular14"
                  className="d--block text--grey4 m__t--4 "
                  label={item?.url as string}
                  ellipsis={{ rows: 1 }}
                  maxLength={(item.url as string).length}
                  showTooltip={(item?.url as string).length > 36}
                />
              </Col>
              {!isInCollection && (
                <Col>
                  <ItemVisibilityToggle module={module} item={item} />
                </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 InstagramReelsCardModule;
