import React, { useState, useEffect } from 'react';
import { connect } from 'umi';

import { SearchOutlined } from '@ant-design/icons';

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

import SelectOptions from '../../components/SelectOptions/index';
import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';

const TitleSearch = (props: any) => {
  const {
    dispatch,
    CommunityList,
    single,
    checklist,
    status,
    communitySelect,
    defaultValue,
    time,
    username,
    searchNone, // 隐藏搜索框
  } = props;

  const key = props.listkey;
  const name = props.list;

  const community = props.community;
  // const [selectOptions, setSelectOptions] = useState(true);
  const [communitys, setCommunitys] = useState(CommunityList);
  const [datePicker, setDate] = useState(null as any);

  const [defalueName, setDefalueName] = useState(undefined);

  const [form] = Form.useForm();

  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) {
      form.setFieldsValue(defaultValue);
    }
  }, []);

  useEffect(() => {
    if (defaultValue != null) {
      form.setFieldsValue(defaultValue);
      setDefalueName(defaultValue.communityName);
    }
  }, [defaultValue]);

  useEffect(() => {
    if (CommunityList != null) {
      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);
  };

  // 选择小区名字并赋值
  const opname = (value: any) => {
    form.setFieldsValue({
      communityName: value,
    });
  };

  // // 小区默认值
  // const communityDef = () => {
  //   if (defaultValue != null && defaultValue.communityName) {
  //     return defaultValue.communityName;
  //   } else {
  //     return undefined;
  //   }
  // };

  return (
    <>
      <Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Row gutter={32}>
          {communitySelect != null ? (
            <Col key={'communitySelect_'}>
              <Form.Item name={'communityName'}>
                <SearchOptionsCommnity
                  defaultName={defalueName}
                  titleSearch={true}
                  opname={opname}
                />
              </Form.Item>
            </Col>
          ) : null}
          {key != null
            ? key.map((item: string, index: number) => {
                return (
                  <Col key={'KeyCol_' + index}>
                    <Form.Item name={item}>
                      <Input placeholder={name[index]} allowClear />
                    </Form.Item>
                  </Col>
                );
              })
            : null}

          {/* 小区列表的管理员姓名搜索 */}
          {username != null ? (
            <Col key={'username_' + username[0]}>
              <Form.Item name={username[0]} style={{ marginBottom: 15 }}>
                <Input placeholder={username[1]} allowClear />
              </Form.Item>
            </Col>
          ) : null}

          {status != null
            ? status.map((item: { name: string; data: Array<''> }, index: number) => {
                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={true}
                onSubmit={printContent}
              />
            ) : null}

            {searchNone == null ? (
              <Form.Item style={{ marginBottom: 5 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ backgroundColor: '#e7f4ff', color: 'rgba(24,144,255,1)' }}
                >
                  <SearchOutlined /> Search
                </Button>
              </Form.Item>
            ) : (
              ''
            )}
          </>
        ) : null}
      </Form>
    </>
  );
};
function mapStateToProps(state: any) {
  const { CommunityList } = state.Init;
  return {
    CommunityList,
  };
}
export default connect(mapStateToProps)(TitleSearch);
