import React, { forwardRef } from "react";
import { Icon, Row } from "antd";
import { useToggle } from "../../util/hooks";
import styled from "styled-components";
import { BtnBase } from "../../util/Button";
import AddClassPopup from "../popup/AddClass";
import SelectClassPopup from "../popup/SelectClass";

const SimulateInput = styled(BtnBase)`
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  width: 252px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
  &:hover {
    border: 1px solid #40a9ff;
  }
  &.has-error {
    border: 1px solid #f5222d;
  }
`;

const SI = ({ children }) => (
  <SimulateInput height="33px">{children}</SimulateInput>
);

const Value = styled.span`
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  font-family: MicrosoftYaHei;
`;
const Placeholder = styled(Value)`
  color: rgba(187, 187, 187, 1);
`;

export default forwardRef(({ onChange, value, placeholder }, ref) => {
  const [v1, sv1] = useToggle();
  const [v2, sv2] = useToggle();
  return (
    <Row type="flex" align="middle" ref={ref}>
      <SI classname="simulateinput">
        <Row type="flex" justify="space-between" align="middle" onClick={sv2}>
          {!value || !value.father || !value.son ? (
            <Placeholder>请选择职位类别</Placeholder>
          ) : (
            <Value>{`${value.father}/${value.son}`}</Value>
          )}
          <Icon type="down" style={{ color: "#979797" }} />
        </Row>
      </SI>
      <Icon
        type="plus-circle"
        onClick={sv1}
        style={{ color: "#42B366", marginLeft: "15px", display: "none" }}
      />
      <AddClassPopup setValue={onChange} visible={v1} onCancel={sv1} />
      <SelectClassPopup setValue={onChange} visible={v2} onCancel={sv2} />
    </Row>
  );
});
