import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export interface Device {
  number: number
  address: string
}

interface DevicesState {
  devices: Device[]
  addDevice: (address: string) => void
  deleteDevice: (number: number) => void
}

export const useDevicesStore = create<DevicesState>()(
  persist(
    (set) => ({
      devices: [],
      addDevice: (address) => 
        set((state) => {
          const newDevice = {
            number: state.devices.length + 1,
            address
          }
          return { devices: [...state.devices, newDevice] }
        }),
      deleteDevice: (number) =>
        set((state) => ({
          devices: state.devices
            .filter(device => device.number !== number)
            .map((device, index) => ({ ...device, number: index + 1 }))
        }))
    }),
    {
      name: 'connectedDevices-storage',
      storage: createJSONStorage(() => localStorage)
    }
  )
)