import React, { useState } from 'react';
import { Dropdown, Input } from 'antd';
import Cron from './cron';

type TProps = {
  style?: React.CSSProperties;
  inputStyle?: React.CSSProperties;
  value?: string;
  onChange?: (params: string) => void;
};

export const CronInput: React.FC<TProps> = props => {
  const { style, inputStyle, value, onChange, ...passThroughProps } = props;
  const [CronValue, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  const onOk = (value: string) => {
    if (onChange) {
      onChange(value);
    }
    setValue(value);
    setVisible(false);
  };
  const handleVisibleChange = (flag: boolean) => {
    setVisible(flag);
  };
  return (
    <div>
      <Dropdown
        trigger={['click']}
        placement="bottomLeft"
        onVisibleChange={handleVisibleChange}
        visible={visible}
        overlay={<Cron onOk={onOk} value={CronValue} style={style} />}
      >
        <Input value={CronValue} style={inputStyle} {...passThroughProps} />
      </Dropdown>
    </div>
  );
};

export default CronInput;