import React, { useState } from "react";

import { Col, Row } from "antd";

import { Icon } from "../Icon";

import { Text } from "components/Typography";
import ConfirmDeleteModal from "components/ConfirmDeleteModal";
import ImageSkeleton from "components/ImageSkeleton";

import { ModuleCardProps } from "pages/Profile/Modules/ModuleDataCaptureActivation";
import LabelTooltip from "components/LabelTooltip/LabelTooltip";

import "./DataCaptureModuleCard.scss";
import { DataCaptureActivationItemNew } from "models/talent/talent-profile-module.model";

interface DataCaptureModuleCardProps
  extends ModuleCardProps<DataCaptureActivationItemNew> {
  loading?: boolean;
  titleShortcut?: boolean;
}

const DataCaptureModuleCard: React.FC<DataCaptureModuleCardProps> = ({
  item,
  onDelete,
}) => {
  const {
    subtitle,
    imagePath,
    secretCode,
    secretLink,
    name = "",
    title,
  } = item;

  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 link?"
        description="This link will be deleted and you can’t undo this action."
        handleConfirm={onDeleteConfirm}
      />

      <div
        data-testid="dca-card"
        className="border-box d--flex dca-card border__radius--8"
      >
        <Row wrap={false} className="dca-card__wrapper full-width">
          <Col className="dca-card__picture">
            {imagePath ? (
              <ImageSkeleton src={imagePath} imgWidth={84} />
            ) : (
              <Icon name={"darken"} />
            )}
          </Col>
          <Col flex={"1"}>
            <Row
              align="middle"
              className="dca-card__content p__y--16 p__x--16 full-width"
              wrap={false}
            >
              <Col>
                <LabelTooltip
                  preset="semibold16"
                  className="d--block m__b--4"
                  label={title}
                  ellipsis={{ rows: 1 }}
                  maxLength={32}
                  showTooltip={name.length > 32}
                />
                <Text className="text--grey4 leading-22" preset="medium14">
                  {subtitle || secretCode || secretLink}
                </Text>
              </Col>
              <Col className="p__l--24">
                <Row wrap={false} gutter={16} align="middle">
                  {/* Should we allow users to edit the module?
                    <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>
                  */}
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </React.Fragment>
  );
};

export default DataCaptureModuleCard;
