import { Col, Row } from "antd";
import classNames from "classnames";
import { Icon, IconName } from "components/Icon";
import { Paragraph } from "components/Typography";
import * as React from "react";
import { useCallback } from "react";
import { SocialProfileLinkItem } from "redux/User/types";

interface SocialTagsProps {
  title?: string;
  className?: string;
  socials?: SocialProfileLinkItem[];
  socialLinks?: SocialProfileLinkItem[];
  onRemoveTag?: (key: string) => void;
  onAddTag?: (item: SocialProfileLinkItem) => void;
}

const SocialTags = ({
  title,
  className,
  socials = [],
  socialLinks = [],
  onRemoveTag,
  onAddTag,
}: SocialTagsProps) => {
  const handleRemoveTag = useCallback(
    (key: string) => () => {
      onRemoveTag?.(key);
    },
    [onRemoveTag]
  );
  const handleAddTag = useCallback(
    (item: SocialProfileLinkItem) => () => {
      onAddTag?.(item);
    },
    [onAddTag]
  );
  const renderItem = useCallback(
    (item: SocialProfileLinkItem) => {
      const isActive = socialLinks.some((el) => el.key === item.key);
      return (
        <Col key={`tag_${item.key}`}>
          <div
            className={classNames(
              "p__y--6 p__x--12 border__radius--122 cursor-pointer",
              isActive ? "border--primary" : "border--grey2"
            )}
            onClick={isActive ? handleRemoveTag(item.key) : handleAddTag(item)}
          >
            <Row gutter={8} align="middle">
              <Col className="height--24">
                <Icon width={24} height={24} name={item.icon as IconName} />
              </Col>
              <Col>
                <Paragraph preset="semibold16">{item.name}</Paragraph>
              </Col>
              <Col className="height--24 text--default">
                <Icon name={isActive ? "close-outline" : "add"} />
              </Col>
            </Row>
          </div>
        </Col>
      );
    },
    [socialLinks]
  );
  return (
    <div className={className}>
      <Paragraph className="m__b--8" preset="semibold18">
        {title}
      </Paragraph>
      <Row gutter={[16, 16]}>{socials.map(renderItem)}</Row>
    </div>
  );
};

export default SocialTags;
