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 { SocialProfileLinkItem } from "../../redux/User/types";
import DragDropContext from "../DragDropContext";
import MusicItem from "../MusicItem";
import PortalComponent from "../PortalComponent/PortalComponent";

interface MusicListProps {
  tags?: any[];
  links: SocialProfileLinkItem[];
  onClickTag?: (id: number) => () => void;
  onSetLinks?: (links: SocialProfileLinkItem[]) => void;
  onChangeField?: (key: string) => (text: string) => void;
  className?: string;
  hideTags?: boolean;
}

const MusicList = ({
  tags,
  onClickTag,
  onChangeField,
  links,
  onSetLinks,
  className,
  hideTags,
}: MusicListProps) => {
  const renderMusicTags = () => {
    return (
      <div>
        <Row gutter={[16, 16]}>
          {tags?.map((item) => {
            const isActive = links.some((el) => el.key === item.key);
            return (
              <Col key={`tag-music_${item.key}`}>
                <div
                  className={classNames(
                    "p__y--6 p__x--12 border__radius--122 cursor-pointer",
                    isActive ? "border--primary" : "border--grey2"
                  )}
                  onClick={onClickTag?.(item.id)}
                >
                  <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>
            );
          })}
        </Row>
      </div>
    );
  };

  const onDropEndModules = (list: SocialProfileLinkItem[]) => {
    onSetLinks?.(list);
  };
  const onSetMusicItem = (index: number) => (value: any) => {
    const list = [...links];
    list[index] = { ...list[index], ...value };
    onSetLinks?.(list);
  };
  return (
    <div>
      {!hideTags ? renderMusicTags() : null}

      <React.Fragment>
        <DragDropContext
          droppableId="modules-drop"
          listClassName={classNames("modules-list m__t--14", className)}
          itemIdPrefix="module"
          list={links}
          onDropEndCallback={onDropEndModules}
        >
          {(dragProvided, snapshot, item, index) => (
            <PortalComponent
              innerRef={dragProvided.innerRef}
              namespaceClass="module-list"
              provided={dragProvided}
              snapshot={snapshot}
            >
              <MusicItem
                onChangeText={onChangeField?.(item.key)}
                name={item.key}
                key={`item_${item.id}`}
                // className="m__b--24"
                title={item.name}
                icon={item.icon as any}
                dragHandleProps={dragProvided.dragHandleProps}
                edit={item.edit}
                isDisableDragged={item.edit}
                onSetItem={onSetMusicItem(index)}
                onRemoveItem={onClickTag?.(item.id)}
                defaultValue={item.value}
                required={item.required}
              />
            </PortalComponent>
          )}
        </DragDropContext>
      </React.Fragment>
    </div>
  );
};

export default React.memo(MusicList);
