import React, { useState, useRef } from 'react';
import { Radio, Input } from 'antd';

import '../g.scss';

function UrlInput(props: IUrlInput) {
  const { change, value = { url: '', type: 'new' } } = props;
  const { url, type } = value;

  const [inputValue, setInputValue] = useState(url); //Input的value
  const [radioValue, setRadioValue] = useState(type); //Input的value

  const inputRef = useRef<any>(null);

  const selectList = [
    { value: 'new', label: '新页面跳转' },
    { value: 'current', label: '当前页跳转' }
  ];

  return (
    <div className="zl-lagre-screen-url-input">
      <Input
        value={inputValue}
        ref={inputRef}
        placeholder="请输入链接地址"
        // maxLength={20}
        onChange={(e) => setInputValue(e.target.value)}
        onBlur={(e) => change({ url: e.target.value, type: radioValue })}
        onPressEnter={() => {
          inputRef?.current?.blur();
        }}
      />
      <div className="zl-large-screen-label-radio-wrap">
        <Radio.Group
          options={selectList}
          onChange={(e) => {
            setRadioValue(e.target.value);
            change?.({ url: inputValue, type: e.target.value });
          }}
          value={radioValue}
        />
      </div>
      {radioValue === 'current' ? (
        <p className="zl-lagre-screen-url-input-tips">
          *当前页面跳转返回需点击浏览器后退按钮，建议选择新页面跳转。
        </p>
      ) : (
        <></>
      )}
    </div>
  );
}

export default UrlInput;

export interface IUrlInput {
  value: { url: string; type: string };
  change: Function;
}

export interface NodeData {
  title: string;
  key: string | number;
  folderId?: string | number;
  selectable?: boolean;
  children?: NodeData[];
}