import React, { useEffect, useState } from "react";
import { Button, Space } 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);
      },
    });
  }, []);
  
  return (
    <div className="astro-list__filter">
      <Space wrap>
        <Button 
          type={selected == "all" ? "primary" : "default"}
          onClick={() => {
            setSelected("all");
            if (onAstroTypeChange) {
                onAstroTypeChange("all");
            }
          }}
        >Todos</Button>
        {list.map((item) => {
          return (
            <Button
              type={selected == item.id ? "primary" : "default"}
              onClick={() => {
                setSelected(item.code);
                if (onAstroTypeChange) {
                  onAstroTypeChange(item.code);
                }
              }}
            >{item.name}</Button>
          );
        })}
      </Space>
    </div>
  );
}

export default Filter;
