import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid2";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import { useEffect, useState } from 'react';
import { DeviceStatus } from '../../types/device.types';
import { useDeviceStore } from '../../stores/deviceStore';

export default function Form() {
  const { device, clearDevice } = useDeviceStore();
  const [select, setSelect] = useState<DeviceStatus>('active');

  const STATUS = ["active", "inactive", "maintenance"];

  useEffect(() => {
    setSelect(device?.status || 'active');

    const clear = async () => {
      await clearDevice();
    };
  
    return () => {
      clear();
    };
  }, [device]);

  return (
    <Grid container spacing={2}>
      {/* Device Code */}
      <Grid size={{ md: 4, xs: 12 }}>
        <TextField fullWidth name='device_code' label="Device Code" variant="outlined" value={device?.device_code} />
      </Grid>
      {/* Total Port */}
      <Grid size={{ md: 4, xs: 12 }}>
        <TextField
          fullWidth
          name="port_count"
          label="Total Port"
          variant="outlined"
          type="number"
          value={device?.port_amount}
        />
      </Grid>

      {/* Status */}
      <Grid size={{ md: 4, xs: 12 }}>
        <FormControl fullWidth>
          <InputLabel id="status-label">Status</InputLabel>
          <Select
            name="status"
            labelId="status-label"
            label="Status"
            value={select}
            onChange={(e) => setSelect(e.target.value as DeviceStatus)}
            renderValue={(selected: string) => (
              <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                <Chip
                  label={selected.toUpperCase()}
                  size="medium"
                  variant="filled"
                  color={
                    selected === "active"
                      ? "success"
                      : selected === "inactive"
                      ? "error"
                      : "warning"
                  }
                />
              </Box>
            )}
          >
            {STATUS.map((status) => (
              <MenuItem key={status} value={status}>
                {status.toUpperCase()}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Grid>

      <Grid size={{ md: 6, xs: 12 }}>
        <TextField
          fullWidth
          name="longitude"
          label="Longitude"
          variant="outlined"
          type="number"
          value={device?.longitude}
        />
      </Grid>

      <Grid size={{ md: 6, xs: 12 }}>
        <TextField
          fullWidth
          name="latitude"
          label="Latitude"
          variant="outlined"
          type="number"
          value={device?.latitude}
        />
      </Grid>
    </Grid>
  );
}