import React, { useState } from "react";
import {
  Space,
  Typography,
  Button,
  message,
  Steps,
  Row,
  Col,
  Form,
  Input,
  Select,
} from "antd";
import { useMutation, useQuery } from "react-query";
import {
  classifiedById,
  classifiedCategories,
  classifiedCategoriesWithSubcategories,
  classifiedsOnly,
  fetchDistricts,
} from "apiCalls/apiEndpoints";
import { Checkbox } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";

function FirstStep() {
  const { data, isLoading: isRefetching } = useQuery(
    ["districts"],
    fetchDistricts
  );
  const { data: classifiedsData, isLoading } = useQuery(
    ["classifieds"],
    classifiedsOnly
  );

  const [subclassifieds, setsubclassifieds] = useState([]);

  const { mutate } = useMutation(classifiedById, {
    onSuccess: (data) => {
      console.log("sub classifieds", data.data.data);
      setsubclassifieds(data.data.data);
    },
  });

  const handleCategoryChange = (e: any) => {
    console.log(e);
    //fetch the classifieds
    mutate(e);
  };

  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };

  return (
    <Form layout="vertical">
      <Row>
        <Col
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 24 }}
        >
          <Form.Item name="name" label="Title">
            <Input />
          </Form.Item>
          <span className="text-danger">
            Title error
            <br />
          </span>
        </Col>
        <Col
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 24 }}
        >
          <Form.Item name="description" label="Description">
            <Input.TextArea />
          </Form.Item>
          <span className="text-danger">
            Description error <br />
          </span>
        </Col>

        <Col
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 24 }}
        >
          <Form.Item name="classified_id" label="Category">
            {/* filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} */}
            {/* disabled={status?.district?.fetching} */}
            {/* defaultValue={firstStepValues?.district_id} */}
            {isLoading && "please wait..."}
            <Select
              showSearch
              placeholder="Select a Category"
              onChange={handleCategoryChange}
              disabled={isLoading}
            >
              {classifiedsData?.data?.data?.map((d: any) => (
                <Select.Option key={d.id} value={d.id}>
                  {d.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <p className="text-danger"></p>
          {/* {status?.ad?.error?.district_id?.join('<br />')} */}
        </Col>
        <Col
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 24 }}
        >
          <Form.Item name="sub_classified_id" label="Sub Category">
            {/* filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} */}
            {/* disabled={status?.district?.fetching} */}
            {/* defaultValue={firstStepValues?.district_id} */}
            <Select
              showSearch
              placeholder="Select a Sub Category"
              disabled={subclassifieds.length < 0}
            >
              {subclassifieds?.map((d: any) => (
                <Select.Option key={d.id} value={d.id}>
                  {d.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <p className="text-danger"></p>
          {/* {status?.ad?.error?.district_id?.join('<br />')} */}
        </Col>
        <Col
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 24 }}
          lg={{ span: 24 }}
        >
          <Form.Item name="district_id" label="District">
            {/* filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} */}
            {/* disabled={status?.district?.fetching} */}
            {/* defaultValue={firstStepValues?.district_id} */}
            <Select showSearch placeholder="Select a district">
              {data?.data?.map((d: any) => (
                <Select.Option key={d.id} value={d.id}>
                  {d.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <p className="text-danger"></p>
          {/* {status?.ad?.error?.district_id?.join('<br />')} */}
        </Col>

      </Row>
    </Form>
  );
}

export default FirstStep;