import React from "react";
import { Icon } from "components/Icon";
import { Text } from "components/Typography";
import { Col, Row } from "antd";
import classNames from "classnames";
import { DataFormOptionItem } from "models/talent/talent-profile-module.model";
import DragDropContext from "../DragDropContext";
import PortalComponent from "../PortalComponent/PortalComponent";
import { ArrayServices } from "utils/array";
import OptionItem from "../CaptureOption";

const OptionItemMemo = React.memo(OptionItem);

interface IProps {
  multiple?: boolean;
  options: DataFormOptionItem[];
  onSetItem?: (value: any) => void;
  onAddOption: () => void;
  checked?: boolean;
}

const CaptureFieldOptions = ({
  multiple = false,
  options = [],
  onSetItem,
  onAddOption,
  checked = false,
}: IProps) => {
  const onDropEndOption = (list: DataFormOptionItem[]) => {
    onSetItem?.({
      options: list.map((item: DataFormOptionItem, index: number) => {
        return { ...item, order: index };
      }),
    });
  };

  const onSetOption = (index: number) => (item: DataFormOptionItem) => {
    const newOptions = ArrayServices.updateWithIndex(options, index, {
      ...item,
      order: index,
    });
    onSetItem?.({ options: newOptions });
  };

  const onRemoveItem = (index: number) => () => {
    const newList = ArrayServices.removeWithIndex(options, index);
    onSetItem?.({ options: newList });
  };

  return (
    <div className="capture-field-options">
      <DragDropContext
        droppableId="modules-drop"
        listClassName={classNames("modules-list capture-field-list")}
        itemIdPrefix="module"
        list={options}
        onDropEndCallback={onDropEndOption}
      >
        {(dragProvided, snapshot, item, index) => (
          <PortalComponent
            innerRef={dragProvided.innerRef}
            namespaceClass="module-list"
            provided={dragProvided}
            snapshot={snapshot}
          >
            <OptionItemMemo
              key={index}
              multiple={multiple}
              label={item.label}
              isDisableDragged={options.length <= 1}
              dragHandleProps={dragProvided.dragHandleProps}
              onRemoveItem={onRemoveItem(index)}
              onSetOption={onSetOption(index)}
              edit={item.edit}
              checked={checked}
            />
          </PortalComponent>
        )}
      </DragDropContext>
      <Row gutter={4} align="middle" className="m__t--20">
        <Col className="height--32 cursor-pointer">
          <Icon name="add-blue" />
        </Col>
        <Col onClick={onAddOption}>
          <Text preset="semibold18" className="text--blue cursor-pointer">
            Add Option
          </Text>
        </Col>
      </Row>

      {!options.length && (
        <div className="m__t--16">
          <Text preset="regular12" className="text--red m__t--16">
            Please add at least one option
          </Text>
        </div>
      )}
    </div>
  );
};

export default CaptureFieldOptions;
