import React from "react";
import { Radio, Input, Form } from "antd";
import { Text } from "components/Typography";
import CaptureOptionList from "components/CaptureOptionList";
import {
  DataFormOptionItem,
} from "models/talent/talent-profile-module.model";
import { LegalsType } from "@komi-app/shared-types"

interface IProps {
  type: LegalsType;
  setType: (value: LegalsType) => void;
  onAddOption: () => void;
  options: DataFormOptionItem[];
  onSetItem?: (value: any) => void;
  text?: string;
  onChangeText: (text: string) => void;
  name?: string;
}

const { TextArea } = Input;

const CaptureLegals = ({
  onAddOption,
  options,
  onSetItem,
  type,
  setType,
  text,
  onChangeText,
  name,
}: IProps) => {
  const onChangeType = (e: any) => {
    setType(e.target.value);
  };
  const handleChangeText = (e: any) => {
    onChangeText(e.target.value);
  };
  const renderOptions = () => {
    if (type === LegalsType.PLAIN_TEXT) {
      return (
        <Form.Item
          rules={[{ required: true, message: "Please add your text" }]}
          name={`plainText${name}`}
          initialValue={text}
        >
          <TextArea
            value={text}
            onChange={handleChangeText}
            rows={5}
            placeholder="Add your text"
            autoSize={{ minRows: 5, maxRows: 5 }}
          />
        </Form.Item>
      );
    }
    return (
      <CaptureOptionList
        multiple
        onAddOption={onAddOption}
        onSetItem={onSetItem}
        options={options}
        checked={type === LegalsType.DEFAULT_CHECK}
      />
    );
  };

  return (
    <div className="p__x--16 p__t--16 p__b--20 capture-field-option-wrapper">
      <Radio.Group onChange={onChangeType} value={type}>
        <Radio value={LegalsType.DEFAULT_UNCHECK}>
          <Text preset="regular12" className="text--default opacity--80">
            Default Unchecked
          </Text>
        </Radio>
        <Radio value={LegalsType.DEFAULT_CHECK}>
          <Text preset="regular12" className="text--default opacity--80">
            Default Checked
          </Text>
        </Radio>
        <Radio value={LegalsType.PLAIN_TEXT}>
          <Text preset="regular12" className="text--default opacity--80">
            Plain Text
          </Text>
        </Radio>
      </Radio.Group>
      <div className="m__t--20">{renderOptions()}</div>
    </div>
  );
};

export default CaptureLegals;
