import React, { forwardRef, useContext } from "react";
import { Row,  Icon, Form, Select, Checkbox } from "antd";
import styled from "styled-components";
import { useToggle } from "../../util/hooks";
import JobPopup from "../popup/JobPopup";
import CityPopup from "../popup/CityPopup";
import { FormCtx } from "../Form";

const Input = styled.div`
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  width: 534px;
  height: 33px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &:hover {
    cursor: pointer;
    border: 1px solid #40a9ff;
  }
  & .has-error {
    border: 1px solid #f5222d;
  }
`;

const Value = styled.div`
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  font-family: MicrosoftYaHei;
`;
const Placeholder = styled(Value)`
  color: rgba(187, 187, 187, 1);
`;
const Content = ({ placeholder, value, onClick }) => (
  <Row
    type="flex"
    justify="space-between"
    align="middle"
    onClick={onClick}
    style={{ width: "100%" }}
  >
    {!value ? <Placeholder>{placeholder}</Placeholder> : <Value>{value}</Value>}
    <Icon type="down" style={{ color: "#979797" }} />
  </Row>
);

const ExpJob = forwardRef(({ onChange, value }, ref) => {
  const [jobVis, setJobVis] = useToggle();
  return (
    <React.Fragment>
      <JobPopup setValue={onChange} visible={jobVis} onCancel={setJobVis} initArr={value}/>
      <Input ref={ref} onClick={setJobVis}>
        <Content
          placeholder="请选择期望职位"
          value={value && value.join(" ")}
        />
      </Input>
    </React.Fragment>
  );
});
const ExpCity = forwardRef(({ onChange, value }, ref) => {
  const [cityVis, setCityVis] = useToggle();
  return (
    <React.Fragment>
      <CityPopup setValue={onChange} visible={cityVis} onCancel={setCityVis} />
      <Input ref={ref} onClick={setCityVis}>
        <Content
          placeholder="请选择期望工作城市"
          value={value && value.join(" ")}
        />
      </Input>
    </React.Fragment>
  );
});

const salary = [
  "1000元/月以下",
  "1000—2000元/月",
  "2001—4000元/月",
  "4001—6000元/月",
  "6001—8000元/月",
  "8001—10000元/月",
  "10001—15000元/月",
  "15001—25000元/月",
  "25001—35000元/月",
  "35001—50000元/月",
  "50001—70000元/月",
  "70001—100000元/月",
  "100000元/月以上",
];
const job_category = ["全职", "兼职", "实习"];

export default () => {
  const { getFieldDecorator } = useContext(FormCtx);
  return (
    <div>
      <Form.Item>
        {getFieldDecorator("job_position", {
          rules: [{ required: true, message: "请选择期望职位" }],
        })(<ExpJob />)}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator("city", {
          rules: [{ required: true, message: "请选择期望工作城市" }],
        })(<ExpCity />)}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator("salary", {
          rules: [{ required: true, message: "请选择期望薪资" }],
        })(
          <Select placeholder="请选择期望薪资" style={{ width: "534px" }}>
            {salary.map((s) => (
              <Select.Option key={s} value={s}>
                {s}
              </Select.Option>
            ))}
          </Select>
        )}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator("job_category", {
          rules: [{ required: true, message: "请选择求职类型" }],
        })(
          <Checkbox.Group>
            {job_category.map((j) => (
              <Checkbox value={j} key={j}>
                {j}
              </Checkbox>
            ))}
          </Checkbox.Group>
        )}
      </Form.Item>
    </div>
  );
};
