/** @format */

import React, { useState } from 'react';

import { DispatchEvent } from '../../../utils';
import { AttrType } from './data';
import { Container } from './styled';

const defaultProps = {
  btnHoverFont: {
    color: 'rgb(255, 255, 255)',
    fontFamily: 'Microsoft Yahei',
    fontWeight: 'normal',
    fontSize: 12,
  },
  btnHoverBorderType: 'solid',
  btnHoverBorderRadius: 0,
  btnHoverBorderColor: 'rgb(24, 144, 255)',
  btnHoverBorderSize: 1,
  btnHoverBgColor: 'rgb(24, 144, 255)',
  btnFont: {
    color: 'rgb(255, 255, 255)',
    fontFamily: 'Microsoft Yahei',
    fontWeight: 'normal',
    fontSize: 12,
  },
  btnBorderType: 'solid',
  btnBorderRadius: 4,
  btnBorderColor: 'rgb(10, 115, 255)',
  btnBorderSize: 1,
  btnBgColor: 'rgb(10, 115, 255)',
  btnWidth: 88,
  inputBorderType: 'solid',
  inputBorderRadius: 0,
  inputBorderColor: '#39414d',
  inputBorderSize: 1,
  inputFont: {
    color: 'rgb(144, 160, 174)',
    fontFamily: 'Microsoft Yahei',
    fontWeight: 'normal',
    fontSize: 12,
  },
  inputPadding: 11,
  inputBgColor: '#39414d',
  btnContent: '确认',
  placeholder: '请输入文本...',
  placeholderColor: 'rgb(144, 160, 174)',
  size: {
    height: 35,
    width: 320,
  },
};

type IProps = AttrType & typeof defaultProps;
// 输入值点击事件
const EVENT_Input_Click = 'event-input-button-click';

const DatavInput: React.FC<IProps> = props => {
  const { placeholder, btnContent, id } = props;
  const [value, setValue] = useState('');
  const onSearch = () => {
    DispatchEvent(id, EVENT_Input_Click, {
      value: value,
    });
  };

  return (
    <Container
      {...props}
      style={{ display: 'flex', justifyContent: 'flex-start' }}
    >
      <input
        type="text"
        className="datav-input"
        placeholder={placeholder}
        onChange={e => setValue(e.target.value)}
        value={value}
      />
      <div className="datav-input-btn" onClick={onSearch}>
        {btnContent}
      </div>
    </Container>
  );
};

DatavInput.defaultProps = defaultProps;

export default DatavInput;