import React, { useEffect, useState } from "react";
import axios from "axios";
import { Cascader,DatePicker, Button } from "antd";
import "./select_title.scss";
import { SelectSection, GridItem2 } from "../css/layout";

const SectionOptions = [
  {
    title: "待审查的话题",
    id: "hidden",
  },
  {
    title: "已发布的话题",
    id: "show",
  },
];

const InputSize = "large"
function select_title({section_params, select_memos}) {
  const [isLoading, setLoadingType] = useState(false);
  const [forumSections, setSectionsType] = useState([]);
  const [sectionParams, setSectionParams] = useState([]);
  useEffect(() => {
    async function init() {
      setLoadingType(true);
      let url = `/forum_sections/select_sections.json`;
      axios
        .get(url)
        .then((result) => {
          if (result) {
            setSectionsType(result.data);
          }
          setLoadingType(false);
        })
        .catch((e) => {
          setLoadingType(false);
          console.log(e);
        });
    }
    init();
  }, []);

  function onChange(value, selectedOptions) {
    let new_section_params = {...sectionParams, forum_section_id: value[value.length-1]}
    setSectionParams(new_section_params)
    select_memos(new_section_params)
  }

  function isHiddenChange(value, selectedOptions) {
    let new_section_params = {...sectionParams, is_hidden: value[0]}
    setSectionParams(new_section_params)
    select_memos(new_section_params)
  }

  function selectBeginTime(date,dateString) {
    setSectionParams({...sectionParams, start_time: dateString})
  }

  function selectEndTime(date,dateString) {
    setSectionParams({...sectionParams, end_time: dateString})
  }

  function SectionSearch(){
    select_memos(sectionParams)
  }

  function filter(inputValue, path) {
    return path.some(
      (option) =>
        option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
    );
  }

  return (
    <div>
      <SelectSection>
        <GridItem2>
          <div>
            <span className="mr15 d-inline-block section-cascader">
              <Cascader
                fieldNames={{
                  label: "title",
                  value: "id",
                  children: "childrens",
                }}
                changeOnSelect
                options={forumSections}
                onChange={onChange}
                placeholder="选择版块"
                showSearch={{ filter }}
                size={InputSize}
              />
            </span>
            <span className="d-inline-block section-cascader">
              <Cascader
                fieldNames={{ label: "title", value: "id" }}
                options={SectionOptions}
                onChange={isHiddenChange}
                placeholder="选择话题"
                size={InputSize}
              />
            </span>
          </div>
          <div className="text-right">
            <span className="mr15">
            <DatePicker onChange={selectBeginTime} placeholder="开始日期" size={InputSize} />
            </span>
            <span className="mr15">
            <DatePicker onChange={selectEndTime} placeholder="结束日期" size={InputSize}/>
            </span>
            <Button type="success" className="success-button" onClick={SectionSearch}>搜索</Button>
          </div>
        </GridItem2>
      </SelectSection>
    </div>
  );
}

export default select_title;
