import React, { useState, useEffect, useRef } from 'react';
import { Link, useIntl, connect, Dispatch, history } from 'umi';

import styles from './index.less';

import BackButton from '../BackButton/BackButton';
import TitleGet from '../TitleGet/TitleGet';

import { Input, Row, Col, Form, Select, Button, DatePicker } from 'antd';
const { Option } = Select;

import SelectOptions from '../../components/SelectOptions/index';
import { gray } from 'chalk';
import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';

const TitleSearch = (props: any) => {
  // console.log("===================================", props)

  const { dispatch, CommunityList } = props;

  const key = props.listkey
  const name = props.list;
  // const single = props.single
  // const checklist = props.checklist;
  // const status = props.status;
  // const communitySelect = props.communitySelect
  // const defaultValue = props.defaultValue;

  const {single,checklist,status,communitySelect,defaultValue} = props;


  const time = props.time;
  const community = props.community;
  const [selectOptions, setSelectOptions] = useState(true)
  const [communitys, setCommunitys] = useState(CommunityList)
  const [communitySingle, setCommunitySingle] = useState(null)
  const [datePicker, setDate] = useState(null)

  const formRef = useRef(null)

  const tosCommunityget = (values: any) => { dispatch({ type: 'Init/tosCommunityget', playload: values }) };
  useEffect(() => {
    // console.log("标题搜寻组件初始化") OK
    if (CommunityList == null) {
      // console.log("小区数量初始化") OK
      tosCommunityget(null)
    }
    if (defaultValue != null) {
      formRef.current.setFieldsValue(defaultValue)
    }
  }, []);

  useEffect(() => {

    if (defaultValue != null) {
      formRef.current.setFieldsValue(defaultValue)
    }
  }, [defaultValue])
  useEffect(() => {

    // console.log(CommunityList)

    if (CommunityList != null) {
      // console.log("小区数量初始化完毕") OK
      var tmp = {}
      tmp[community] = CommunityList
      // props.onSubmit(tmp) 禁用 改用组件初始化
      setCommunitys(CommunityList)
    }
  }, [CommunityList])



  const onFinish = (values: any) => {
    if (datePicker) {
      values[time[0]] = datePicker;
    }
    if (community) {
      values[community] = communitys
    }
    console.log('Success:', values);
    props.onSubmit(values)
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onChange = (date: any, dateString: string) => {
    setDate(dateString)
  }

  const printContent = (comment: any) => {
    setCommunitys(comment)
  }

  return (
    <>
      <Form ref={formRef} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>

        <Row gutter={32}>
          {
            communitySelect != null ?
              <Col key={"communitySelect_"} ><Form.Item name={"communityName"}><SearchOptionsCommnity titleSearch={true} /></Form.Item></Col>
              : null
          }
          {
            key != null ?
              key.map((item, index) => {
                return (
                  <Col key={"KeyCol_" + index}><Form.Item name={item}><Input placeholder={name[index]} allowClear /></Form.Item></Col>
                )
              })
              : null
          }
          {
            status != null ?
              status.map((item, index) => {
                return (
                  <Col key={"StatusCol_" + index}>
                    <Form.Item name={item.name[0]}>
                      <Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}>
                        {
                          item.data.map(word => {
                            return (
                              <Option key={word} value={word[0]}>{word[1]}</Option>
                            )
                          })
                        }
                      </Select>
                    </Form.Item>
                  </Col>
                )
              })
              : null
          }
          {
            time != null ?
              <Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col>
              : null
          }
          {
            community == null ?
              <Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
              : null
          }
        </Row>
        {
          community != null ?
            <>
              {
                CommunityList != null ?
                  <SelectOptions checklist={checklist} single={single} list={CommunityList.sort()} show={selectOptions} onSubmit={printContent} /> :
                  null
              }

              <Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff", color: "rgba(24,144,255,1)" }}>Search</Button></Form.Item>
            </> : null
        }


      </Form>




    </>
  );
};
function mapStateToProps(state: any) {
  // console.log("state参数",state)
  const { CommunityList } = state.Init;
  return {
    CommunityList,
  };
}
export default connect(mapStateToProps)(TitleSearch);
// time={["key","预订时间筛选"]}
// status = [{name:"status",data:["处理", "未处理"]}]
// listkey={['A', 'C']}    list={['订单状态', '预订时间筛选']}

// <TitleSearch
// status={[{
//   name: ["status", "订单状态"],
//   data: [[0, "全部"], [1, "已申请"], [2, "已预订"], [3, "已使用"], [4, "已取消"]]
// }]}
// time={["key", "预订时间筛选"]}
// community={"communityName"}
// // single={true}
// onSubmit={CallBackTitleSearch} />