import {
  SocialIcon,
  SocialLinkType,
  getSocialLinkConfig,
} from "@komi-app/creator-ui";
import { Col, Row } from "antd";
import classNames from "classnames";
import { Icon } from "components/Icon";
import { Paragraph } from "components/Typography";
import { useCallback } from "react";
import { SocialProfileLinkItem } from "redux/User/types";

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

const SocialTagsV2 = ({
  title,
  className,
  socials = [],
  socialLinks = [],
  onRemoveTag,
  onAddTag,
}: SocialTagsProps) => {
  const handleRemoveTag = useCallback(
    (type: SocialLinkType) => () => {
      onRemoveTag?.(type);
    },
    [onRemoveTag]
  );
  const handleAddTag = useCallback(
    (type: SocialLinkType) => () => {
      const config = getSocialLinkConfig(type);
      onAddTag?.({
        key: type,
        name: config.label,
        icon: "error",
        id: 0,
      });
    },
    [onAddTag]
  );
  const renderItem = useCallback(
    (type: SocialLinkType) => {
      const socialLink = getSocialLinkConfig(type);
      const isActive = socialLinks.some((el) => el.key === type);
      return (
        <Col key={`tag_${socialLink.name}`}>
          <div
            className={classNames(
              "p__y--6 p__x--12 border__radius--122 cursor-pointer",
              isActive ? "border--primary" : "border--grey2"
            )}
            onClick={isActive ? handleRemoveTag(type) : handleAddTag(type)}
          >
            <Row gutter={8} align="middle">
              <Col className="height--24">
                <SocialIcon social={type} mode="color" />
              </Col>
              <Col>
                <Paragraph preset="semibold16">{socialLink.label}</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 SocialTagsV2;
