import React, { Dispatch, SetStateAction } from "react"
import { Items, Target } from "../interfaces/frontend"
import Item from "./Item"

function EventBar({
  props: { setMode, setTarget },
}: {
  props: {
    setMode: Dispatch<SetStateAction<number>>
    setTarget: Dispatch<SetStateAction<Target>>
  }
}) {
  const items: Items[] = [
    { icon: "burger-menu", text: "Menu" },
    { icon: "radar", text: "Radar scan", mode: 0, amount: 1 },
    { icon: "torpedo", text: "Fire torpedo", mode: 1, amount: 1 },
    { icon: "scope", text: "Fire missile", mode: 2 },
    { icon: "gear", text: "Settings" },
  ]
  return (
    <div className="event-bar">
      {items.map((e, i) => (
        <Item
          key={i}
          props={{
            ...e,
            callback: () => {
              if (e.mode !== undefined) setMode(e.mode)
              setTarget((e) => ({ ...e, show: false }))
            },
          }}
        />
      ))}
    </div>
  )
}

export default EventBar