import React, { Button, Col, List, Popover, Row } from "antd";
import { Icon } from "components/Icon";
import ImageSkeleton from "components/ImageSkeleton";
import { Paragraph } from "components/Typography";
import { BaseItem } from "models/talent/talent-profile-module.model";
import ItemVisibilityToggle from "pages/Profile/ModuleEditor/ItemVisibilityToggle";
import { useCallback, useState } from "react";
import { BaseModuleProps } from "redux/Common/types";
import { useTypedSelector } from "redux/rootReducer";
import { selectUserData } from "redux/User/selector";
import "./DataCaptureFormCard.scss";

interface DataCaptureFormCardProps extends BaseModuleProps {
  item: BaseItem;
  title?: string;
  image?: string;
  contentTitle?: string;
  contentSubtitle?: string;
  onViewData?: () => void;
  onDelete?: () => void;
  onEdit?: () => void;
}

const DataCaptureFormCard = ({
  title,
  image,
  item,
  contentTitle,
  contentSubtitle,
  onViewData,
  onDelete,
  onEdit,
  module,
}: DataCaptureFormCardProps) => {
  const user = useTypedSelector(selectUserData);

  const [visible, setVisible] = useState(false);
  const handleViewData = useCallback(() => {
    setVisible(false);
    setTimeout(() => {
      onViewData?.();
    }, 200);
  }, [onViewData]);
  const handleEdit = useCallback(() => {
    setVisible(false);
    setTimeout(() => {
      onEdit?.();
    }, 200);
  }, [onEdit]);
  const handleDelete = useCallback(() => {
    setVisible(false);
    setTimeout(() => {
      onDelete?.();
    }, 200);
  }, [onDelete]);
  const renderEmpty = useCallback(() => {
    return <Icon name={"darken"} />;
  }, [user?.talentProfile?.themeType]);

  return (
    <div className="data-capture-form-card">
      <Row wrap={false} align="middle" gutter={24}>
        <Col flex={"1"}>
          <Paragraph
            className="data-capture-form-card__title"
            ellipsis={{ rows: 1 }}
            preset="semibold18"
          >
            {title}
          </Paragraph>
        </Col>
        <Col>
          <ItemVisibilityToggle module={module} item={item} />
        </Col>
        <Col className="height--24">
          <Popover
            visible={visible}
            placement="bottomRight"
            overlayClassName="data-capture-form-card-overlay"
            arrowContent={null}
            onVisibleChange={setVisible}
            content={
              <List className="data-capture-form-card__actions">
                {onViewData && (
                  <List.Item onClick={handleViewData}>
                    <Paragraph preset="semibold14">View Data</Paragraph>
                  </List.Item>
                )}
                <List.Item onClick={handleEdit}>
                  <Paragraph preset="semibold14">Edit</Paragraph>
                </List.Item>
                <List.Item onClick={handleDelete}>
                  <Paragraph preset="semibold14" className="text--red">
                    Delete
                  </Paragraph>
                </List.Item>
              </List>
            }
            trigger={["click"]}
          >
            <Button
              className="p--0 d--flex align__items--center height--24"
              type="link"
            >
              <Icon name="more" />
            </Button>
          </Popover>
        </Col>
      </Row>
      <Row
        wrap={false}
        className="m__t--20 data-capture-form-card__content"
        align="middle"
      >
        <Col className="data-capture-form-card__picture">
          {image ? <ImageSkeleton src={image || ""} /> : renderEmpty()}
        </Col>
        <Col className="m__l--16" flex="1">
          <Paragraph
            className="data-capture-form-card__content-title"
            ellipsis={{ rows: 1 }}
            preset="semibold16"
          >
            {contentTitle}
          </Paragraph>
          <Paragraph
            ellipsis={{ rows: 1 }}
            className="m__t--4 opacity--60 data-capture-form-card__content-title"
          >
            {contentSubtitle}
          </Paragraph>
        </Col>
      </Row>
    </div>
  );
};

export default DataCaptureFormCard;
