import React, { useState, useRef, useCallback, useEffect } from "react";
import { Icon } from "components/Icon";
import { Col, Form, Input, Row } from "antd";
import { Paragraph } from "components/Typography";
import classNames from "classnames";
import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import DragDropButton from "../Button/DragDropButton";
import "./index.scss";
interface IProps {
  multiple?: boolean;
  label: any;
  onSetOption?: (item: any) => void;
  dragHandleProps?: DraggableProvidedDragHandleProps;
  isDisableDragged: boolean;
  onRemoveItem?: () => void;
  edit?: boolean;
  checked: boolean;
}

const CaptureOption = ({
  multiple,
  label = "",
  onSetOption,
  dragHandleProps,
  isDisableDragged,
  onRemoveItem,
  edit = false,
  checked = false,
}: IProps) => {
  const ref = useRef<Input>(null);
  const [value, setValue] = useState(label);

  useEffect(() => {
    if (label) {
      setValue(label);
    }
  }, [label]);

  const handleChange = useCallback((event) => {
    const text = event.target.value;
    setValue(text);
  }, []);

  const handleBlur = useCallback(() => {
    if (!value.length) {
      return;
    }
    onSetOption?.({ edit: false, label: value, checked: checked });
  }, [value, onSetOption, checked]);
  const handleKeyDown = useCallback(
    (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        onSetOption?.({ edit: false, label: value, checked: checked });
      }
    },
    [onSetOption, value, checked]
  );

  const handleEnableEdit = useCallback(() => {
    onSetOption?.({ edit: true });
    setTimeout(() => {
      ref?.current?.focus();
    }, 200);
  }, [ref, onSetOption]);

  return (
    <Row align="top" className="capture-field-option">
      <Col className="flex-item">
        <Icon
          name={
            multiple
              ? checked
                ? "capture-checkbox-checked"
                : "capture-checkbox"
              : "capture-radio"
          }
        />
      </Col>
      <Col flex="1" className="flex-item">
        {!edit && (
          <div className="p__l--8 p__r--16" onClick={handleEnableEdit}>
            <Paragraph className="text--default opacity--80" preset="regular14">
              {value}
            </Paragraph>
          </div>
        )}
        <Form.Item
          rules={[
            {
              required: true,
              message: "Please enter this field",
            },
          ]}
          className={classNames("m__t--0 m__b--0 m__l--8", !edit && "d--none")}
        >
          <Input
            ref={ref}
            autoFocus
            onBlur={handleBlur}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
          />
        </Form.Item>
      </Col>
      <Col>
        <Row gutter={16} align="middle" wrap={false}>
          <Col onClick={onRemoveItem} className="height--24 cursor-pointer">
            <Icon name="trash" />
          </Col>
          <Col>
            <DragDropButton
              className="p__x--0 p__y--0 min-h-auto d--flex align__items--center"
              dragType="vertical"
              dragHandleProps={dragHandleProps}
              disabled={isDisableDragged}
              onClick={(event) => event.stopPropagation()}
            />
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default CaptureOption;
