import React from "react";
import { connect } from "redux-bundler-react";
import Select from "react-select";

class SelectDistrict extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSelect(opts) {
    const { doSetDistrictFilter } = this.props;
    doSetDistrictFilter(opts);
  }

  render() {
    const { options, districtFilter } = this.props;
    const { label, value } = districtFilter;

    const customStyles = {
      control: (base) => ({
        ...base,
        minHeight: "25px", // Smaller height for the control
        height: "25px",
        fontSize: "14px", // Smaller font size for the selected value
        width: "150px",
      }),
      dropdownIndicator: (base) => ({
        ...base,
        paddingTop: 0,
        paddingBottom: 0,
      }),
      clearIndicator: (base) => ({
        ...base,
        paddingTop: 0,
        paddingBottom: 0,
      }),
      valueContainer: (base) => ({
        ...base,
        padding: "0 8px", // Adjust padding within the value container
      }),
      input: (base) => ({
        ...base,
        margin: 0, // Remove default margin for the input
        padding: 0,
      }),
      menu: (base) => ({
        ...base,
        fontSize: "14px", // Smaller font size for menu items
      }),
      option: (base) => ({
        ...base,
        padding: "5px 14px", // Adjust padding for individual options
      }),
    };
    return (
      <Select
        id={"select-district"}
        options={options}
        onChange={(opts) => {
          this.handleSelect(opts);
        }}
        styles={customStyles}
        value={{ label: label, value: value }}
        defaultValue={{ label: label, value: value }}
      />
    );
  }
}
export default connect(
  "doSetDistrictFilter",
  "selectDistrictFilter",
  SelectDistrict
);
