import React, { useState, useImperativeHandle, forwardRef, useRef } from 'react';
import { Button } from 'antd';
import Form from '../Form/Form';
import useConfig from './../../use/useConfig';
import { FormProps, FormRefProps } from '../Form/interface';
import style from './search.module.scss';

export interface SeniorSearchRefProps extends FormRefProps {
  toggle(): boolean;
}

export interface SeniorSearchProps extends FormProps {
  onSearch?(formData: any): void
}

const SeniorSearch: React.ForwardRefRenderFunction<SeniorSearchRefProps, SeniorSearchProps> = (props, ref) => {
  const { onSearch, ...formProps } = props;
  const formRef = useRef<FormRefProps>(null);
  const [isFirstLoad, setFirstLoad] = useState(false);
  const [visible, setVisible] = useState(false);
  const config = useConfig();

  useImperativeHandle(ref, () => ({
    ...formRef.current as FormRefProps,
    toggle: () => {
      const toggleVisible = !visible;
      setVisible(toggleVisible);
      if (!isFirstLoad) setFirstLoad(true);
      return toggleVisible
    }
  }));

  function onReset() {
    formRef.current?.resetFields()
  }

  async function _onSearch() {
    const formData = await formRef.current?.validateFields();
    if (formData) onSearch?.(formData);
  }

  return isFirstLoad ? (
    <div className={style.senior} hidden={!visible}>
      <Form ref={formRef} groupNumber={3} {...formProps} />
      <div className={style.seniorBtns}>
        <Button onClick={_onSearch} type='primary'>
          {config?.local?.search}
        </Button>
        <span className={style.space} />
        <Button onClick={onReset}>
          {config?.local?.reset}
        </Button>
      </div>
    </div>
  ) : null
}

export default forwardRef(SeniorSearch);