import React, { useCallback, useMemo, useState } from "react";
import { Col, Dropdown, Menu, Row, Tooltip } from "antd";

import { Icon } from "components/Icon";
import { Paragraph } from "components/Typography";

import classNames from "classnames";
import "./PodcastDropdownService.scss";

interface PodcastDropdownServiceProps {
  links: any[];
  menuItems?: any[];
  onClickMenu?: (item: any) => void;
}

// TODO: Copied from `SocialLinkList` - let's make a generic component when we have time
const PodcastDropdownService = ({
  links,
  menuItems,
  onClickMenu,
}: PodcastDropdownServiceProps) => {
  const [visibleDropdown, setVisibleDropdown] = useState(false);
  const [visibleTooltip, setVisibleTooltip] = useState(false);

  const onClickItem = useCallback(
    (id: number) => () => {
      setVisibleDropdown(false);
      setTimeout(() => {
        onClickMenu?.(id);
      }, 200);
    },
    [onClickMenu]
  );

  const menu = useMemo(() => {
    return (
      <Menu
        className={classNames("dropdown-service__menu", "modal")}
        style={{ width: 270 }}
      >
        {menuItems?.map((item) => {
          const isActive = links.some((element) => element.key === item.key);

          return (
            <Menu.Item
              key={item.key}
              disabled={isActive}
              className={isActive ? "active" : ""}
              onClick={onClickItem(item)}
            >
              <Row gutter={12} align="middle">
                <Col className="height--24">
                  <Icon name={item.icon} />
                </Col>
                <Col>
                  <Paragraph
                    className={isActive ? "text--grey4" : ""}
                    preset="semibold16"
                  >
                    {item.name}
                  </Paragraph>
                </Col>
              </Row>
            </Menu.Item>
          );
        })}
      </Menu>
    );
  }, [links]);
  const isDisabled = useMemo(
    () => menuItems?.length === links.length,
    [menuItems, links]
  );
  return (
    <Dropdown
      trigger={["click"]}
      visible={visibleDropdown}
      onVisibleChange={setVisibleDropdown}
      overlay={menu}
      overlayClassName="dropdown-service__dropdown"
      placement="topCenter"
      className={classNames(
        "smart-link-select--link-dd dropdown-service__add-btn cursor m__t--24",
        "modal"
      )}
      disabled={isDisabled}
    >
      <Tooltip
        style={{ zIndex: 9999999 }}
        visible={!isDisabled ? false : visibleTooltip}
        onVisibleChange={setVisibleTooltip}
        overlayClassName="podcast-dropdown-service-tooltip"
        placement="top"
        title={`All available services have been added`}
      >
        <Row
          className={isDisabled ? "width--160" : ""}
          gutter={8}
          align="middle"
        >
          <Col className={classNames("height--32")}>
            <Icon name={isDisabled ? "add-grey" : "add-blue"} />
          </Col>
          <Col flex={"1"}>
            <Paragraph
              className={isDisabled ? "text--dustyGray" : "text--blue"}
              preset="semibold18"
            >
              Add Service
            </Paragraph>
          </Col>
        </Row>
      </Tooltip>
    </Dropdown>
  );
};

export default React.memo(PodcastDropdownService);
