import React, { useEffect, useState } from "react";
import { Button,  Row, Col } from "antd";
import "./index.less";
import _service from "@netuno/service-client";

function Filter({onAstroTypeChange}) {
  const [selected, setSelected] = useState("all");
  const [list, setList] = useState([]);
  useEffect(() => {
    _service({
      url: "/astro/type",
      success: (response) => {
        setList(response.json);
      },
      fail: (e) => {
        console.log("Service Error", e);
      },
    });
  }, []);
  /*
  import { Segmented } from 'antd';
   <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
);
  */
  return (
    <Row className="astro-list__filter" 
      gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}
    >
      <Col>
        <Button
          type={selected == "all" ? "primary" : "default"}
          onClick={() => {
            setSelected("all");
            if (onAstroTypeChange) {
              onAstroTypeChange("");
            }
          }}
        >Todos</Button>
      </Col>
      {list.map((item) => {
        return (
          <Col>
            <Button
              type={selected == item.code ? "primary" : "default"}
              onClick={() => {
                setSelected(item.code);
                if (onAstroTypeChange) {
                  onAstroTypeChange(item.uid);
                }
              }}
            >{item.name}</Button>
          </Col>
          );
        }
      )}
    </Row>
  );
}

export default Filter;