import React from "react";
import {Icon,Tag, useIsComponentDismissed} from "@komi-app/components";


import { ActionTypes } from "./types";
import { ContactType, Segment } from "@komi-app/fans-sdk";

import { noop } from "../../utils/fns";

import "./SegmentItem.scss";

const contactTypeLabels: Record<ContactType, string[]> = {
  [ContactType.Any]: ["Email", "Phone"],
  [ContactType.Email]: ["Email"],
  [ContactType.Phone]: ["Phone"],
  [ContactType.EmailAndPhone]: ["Email", "Phone"],
}

export interface SegmentItemWithCountProps {
  segment: Segment & {
    count: number;
  };
  onActionItemClick: (actionName: ActionTypes, segment: Segment) => void;
  onNameClick?: (segment: Segment) => void;
}
const SegmentItemWithCount: React.FC<SegmentItemWithCountProps> = ({
  segment,
  onActionItemClick,
  onNameClick = noop,
}) => {
  const {
    ref,
    isComponentVisible: isDropdownOpen,
    setIsComponentVisible: setDropdownVisible,
  } = useIsComponentDismissed<HTMLInputElement>(false);

  const { contactType, name, segmentId } = segment;
  const contactTags = contactTypeLabels[contactType] || [];

  const actionsList = [
    {
      label: "Edit",
      type: ActionTypes.EDIT,
      customClass: "",
    },
    // DESCOPED
    // {
    //   label: "Duplicate",
    //   type: ActionTypes.DUPLICATE,
    //   customClass: "",
    // },
    {
      label: "Send a Campaign",
      type: ActionTypes.SEND_A_CAMPAIGN,
      customClass: "",
    },
    // DESCOPED
    // {
    //   label: "Export as CSV",
    //   type: ActionTypes.EXPORT_AS_CSV,
    //   customClass: "",
    // },
    {
      label: "Delete",
      type: ActionTypes.DELETE,
      customClass: "negative",
    },
  ];

  // DESCOPED
  // const getStatus = () => {
  //   return previousMonthContactDifference === 0
  //     ? "neutral"
  //     : previousMonthContactDifference < 0
  //       ? "negative"
  //       : "positive";
  // };

  const toggleDropdown = () => {
    setDropdownVisible((prev) => !prev);
  };

  const formatContactsCount = (count: number = 0) => {
    if (count >= 1e6) {
      return `${(count / 1e6).toFixed(2)}M`;
    }
    return count.toLocaleString("en-US");
  };

  return (
    <div className="segment-container">
      <div className="segment-contacts">
        <div className="segment-contacts__value" data-testid="contact-count">
          {formatContactsCount(segment.count)}
        </div>
        <div className="segment-contacts__label">Contacts</div>
      </div>
      <div className="segment-details">
        <div className="segment-details__name" onClick={() => onNameClick(segment)}>
          {name}
        </div>

        {/* DESCOPED */}
        {/* <div className="segment-details__status">
          <div className={`segment-details__status-count ${getStatus()}`}>
            {getStatus() !== "neutral" && (
              <Icon
                name={getStatus() === "positive" ? "upward" : "downward"}
                fill={getStatus() === "positive" ? "#4A9200" : "#D70018"}
                height={16}
                width={16}
                data-testid="segment-count-change-value"
              />
            )}
            <span data-testid="segment-count-change-value">
              {previousMonthContactDifference.toLocaleString("en-US")} contacts{" "}
              <span className={`segment-details__status-count-last30`}>in the last 30 days</span>
            </span>
          </div>
        </div> */}
      </div>

      <div className="segment-types">
        {contactTags.map((type, index) => (
          <Tag key={index} text={type} colour="blue" data-testid="data-capture-types" />
        ))}
      </div>

      <div className="segment-actions" ref={ref}>
        <div
          className="segment-actions__icon"
          onClick={toggleDropdown}
          data-testid="openDropdownButton"
        >
          <Icon name="more" fill="#121212" height={24} width={24} />
        </div>

        <div className="segment-actions-container" data-testid="openDropdown">
          {isDropdownOpen && (
            actionsList.map(({ type, label, customClass }, index) => {
              return (
                <div
                  key={index}
                  className={`segment-actions__action ${customClass}`}
                  onClick={() => {
                    onActionItemClick(type, segment);
                    setDropdownVisible(false);
                  }}
                  data-testid="actionButton"
                >
                  {label}
                </div>
              );
            })
          )}
        </div>
      </div>
    </div >
  );
};

export default SegmentItemWithCount;
