import { Form, Input, Button, Spin, Row, Col, Switch, Select as AntdSelect, Checkbox } from 'antd'
import { useEffect, useMemo, useState } from 'react'
import HttpService from '../../services/httpService'
import { respuestas } from '../../utilities'
import { useNavigate } from 'react-router-dom'
import { useQuery, useModel } from '../../hooks'
import { commonRules } from '../../constants/rules'
import { Select } from '../../components'

const selectores = {
  productos: {
    name: "producto",
    expand: "subproductos",
  },
}

const endpoints = {
  condicionante: "condicionante",
};

const amplitudes = [
  {
    value: "Familia",
    label: "Familia",
  },
  {
    value: "Familia (Varios)",
    label: "Familia (Varios)",
  },
]

const fines = [
  {
    value: "Consumo Humano",
    label: "Consumo Humano",
  },
  {
    value: "Polinización",
    label: "Polinización",
  }
]

const tipos = [
  {
    value: "Introducción",
    label: "Introducción",
  },
  {
    value: "Expotación",
    label: "Expotación",
  },
  {
    value: "Tránsito",
    label: "Tránsito",
  },
  {
    value: "Movilización (Salida)",
    label: "Movilización (Salida)",
  },
  {
    value: "Importación",
    label: "Importación",
  }
]

const ProductoDetalle = () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)
  const query = useQuery()
  const id = query.get("id")
  const [request, setRequest] = useState({})
  const [activa, setActiva] = useState(false)
  const [subproductos, setSubproductos] = useState([])

  // const extraParams = useMemo(() => ({
  //   idAgenda: id,
  // }), [id])

  const requestParams = useMemo(() => ({
    name: endpoints.condicionante,
    // expand: 'subproductos',
    id,
    // extraParams
  }), [id])


  const { model, modelLoading } = useModel(request)

  useEffect(() => {
    if (id) {
      setRequest(requestParams)
    }
    return () => {
      setRequest({})
    }
  }, [id, requestParams])

  useEffect(() => {
    if (model) {
      form.setFieldsValue({ //seteo cuando son varios
        ...model,
        subproductos: model.subproductos.map((subproducto, index) => ({
          ...subproducto,
          key: index
        }))
      })
      if (model?.activa) {
        setActiva(true)
      }
    }
  }, [form, model])

  const onFinish = async (values) => {
    try {
      setLoading(true);

      let body = {
        ...values,
      };

      if (id) {
        body.id = id
      }

      const res = await HttpService.post(`${endpoints.producto}/guardar`, body);
      respuestas(res);
      if (res?.status === 200) {
        navigate('/condicionantes')
      }
    } catch (error) {
      console.log(error);
      setLoading(false);
    } finally {
      setLoading(false);
    }
  }

  if (modelLoading) {
    return <Spin
      size="large"
      style={{ display: "block", margin: "auto", marginTop: "50px" }}
    />
  }

  return (
    <Form
      layout="vertical"
      name="basic"
      form={form}
      onFinish={onFinish}
      onFinishFailed={() => { }}
    >
      <Row gutter={16}>
        <Col span={24}>
          <h2>Información del Condicionante</h2>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Título"
            name="titulo"
            rules={[
              commonRules.requerido,
            ]}
          >
            <Input />
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Descripción"
            name="descripcion"
            rules={[
              commonRules.requerido,
            ]}
          >
            <Input.TextArea rows={3} />
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Activa"
            name="activa"
          >
            <Switch
              checkedChildren="Si"
              unCheckedChildren="No"
              style={{ backgroundColor: activa ? "#52c41a" : "#f5222d" }}
              checked={activa}
              onChange={(checked) => setActiva(checked)}
            />
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Amplitud"
            name="amplitud"
            rules={[
              commonRules.requerido,
            ]}
          >
            <AntdSelect
              showSearch
              placeholder="Seleccione una amplitud"
              optionFilterProp="children"
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              {amplitudes.map((amplitud) => (
                <AntdSelect.Option key={amplitud.value} value={amplitud.value}>
                  {amplitud.label}
                </AntdSelect.Option>
              ))}
            </AntdSelect>
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Fines de Movilización"
            name="fines"
            rules={[
              commonRules.requerido,
            ]}
          >
            <Checkbox.Group>
              {fines.map((fin) => (
                <Checkbox key={fin.value} value={fin.value}>
                  {fin.label}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Tipo de Movilización"
            name="tipos"
            rules={[
              commonRules.requerido,
            ]}
          >
            <Checkbox.Group>
              {tipos.map((tipo) => (
                <Checkbox key={tipo.value} value={tipo.value}>
                  {tipo.label}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Especies"
            name="idProducto"
            rules={[commonRules.requerido]}
          >
            <Select
              modelsParams={selectores.productos}
              labelProp="nombre"
              valueProp="idProducto"
              append={[model?.producto]}
              extraParams={{ padre: true }}
              onChange={(_, item) => {
                setSubproductos(item?.subproductos)
                console.log(item)
              }}
            />
          </Form.Item>
        </Col>
        <Col md={8} xs={24}>
          <Form.Item
            label="Subproductos"
            name="subproductos"
          >
            <Checkbox.Group>
              {subproductos.map((subproducto) => (
                <Checkbox key={subproducto?.id} value={subproducto?.id}>
                  {subproducto?.nombre}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginTop: "30px" }}
              loading={loading}
            >
              Guardar
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}

export default ProductoDetalle