import { PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
import React, { useRef } from 'react';
import LabelItem from './label-item';
import Wrapper from './wrapper';
interface LabelSelectorProps {
  labels: Record<string, any>;
  label?: string;
  btnText?: string;
  labelList: Array<{ key: string; value: string }>;
  onLabelListChange: (list: { key: string; value: string }[]) => void;
  onChange?: (labels: Record<string, any>) => void;
  description?: React.ReactNode;
}

const Inner: React.FC<LabelSelectorProps> = ({
  labels,
  labelList,
  onChange,
  onLabelListChange,
  label,
  btnText,
  description
}) => {
  const intl = useIntl();
  const buttonRef = useRef<HTMLButtonElement>(null);
  const boxRef = useRef<HTMLDivElement>(null);

  const updateLabels = (list: { key: string; value: string }[]) => {
    const newLabels = _.reduce(
      list,
      (result: any, item: any) => {
        if (item.key) {
          result[item.key] = item.value;
        }
        return result;
      },
      {}
    );
    onChange?.(newLabels);
  };
  const handleOnChange = (index: string, label: any) => {
    const list = _.cloneDeep(labelList);
    list[index] = label;
    onLabelListChange(list);
    updateLabels(list);
  };

  const handleAddLabel = () => {
    const newLabelList = [
      ...labelList,
      {
        key: '',
        value: ''
      }
    ];
    onLabelListChange(newLabelList);
    updateLabels(newLabelList);
  };

  const handleOnDelete = (index: string) => {
    const list = _.cloneDeep(labelList);
    list.splice(parseInt(index), 1);
    onLabelListChange(list);
    updateLabels(list);
  };

  return (
    <Wrapper label={label} description={description}>
      <>
        {_.map(labelList, (item: any, index: string) => {
          return (
            <LabelItem
              key={index}
              label={item}
              seperator=":"
              labelList={labelList}
              onDelete={() => handleOnDelete(index)}
              onChange={(obj) => handleOnChange(index, obj)}
            />
          );
        })}
        <div className="flex justify-center">
          <Button
            ref={buttonRef}
            type="text"
            block
            style={{
              marginTop: 16,
              backgroundColor: 'var(--ant-color-fill-secondary)'
            }}
            onClick={handleAddLabel}
          >
            <PlusOutlined className="font-size-14" />{' '}
            {intl.formatMessage({
              id: btnText || 'common.button.addSelector'
            })}
          </Button>
        </div>
      </>
    </Wrapper>
  );
};

export default React.memo(Inner);