"use client";
// npm install
import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
import React, { useState } from "react";
import SafeApexCharts from "@/components/charts/SafeApexCharts";
import { useTranslation } from "react-i18next";
interface Props {
  // params type
}

const DashboardLineChart: React.FC = () => {
  const { t } = useTranslation();
  const [warehouseType, setWarehouseType] = useState(t("Cold storage"));
  const [timeRange, setTimeRange] = useState("6h");

  const options = {
    chart: { type: "line" as const },
    xaxis: {
      categories: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00"],
    },
    yaxis: {
      title: { text: t("Temperature") },
    },
    stroke: { curve: "smooth" as const },
  };
  const series = [
    {
      name: "溫度",
      data: [],
    },
  ];

  return (
    <div
      style={{
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        padding: 24,
        background: "#fff",
        boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
        marginBottom: 16,
        width: "100%",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontWeight: 600, fontSize: 18, flex: 1 }}>
          {t("Warehouse temperature record")}
        </span>
        <FormControl size="small" style={{ minWidth: 100, marginRight: 8 }}>
          <InputLabel>{t("Warehouse type")}</InputLabel>
          <Select
            value={warehouseType}
            label={t("Warehouse type")}
            onChange={(e) => setWarehouseType(e.target.value)}
          >
            <MenuItem value={t("Cold storage")}>{t("Cold storage")}</MenuItem>
            <MenuItem value={t("Normal temperature storage")}>
              {t("Normal temperature storage")}
            </MenuItem>
          </Select>
        </FormControl>
        <FormControl size="small" style={{ minWidth: 100 }}>
          <Select
            value={timeRange}
            onChange={(e) => setTimeRange(e.target.value)}
          >
            <MenuItem value="6h">{t("Last 6 hours")}</MenuItem>
            <MenuItem value="24h">{t("Last 24 hours")}</MenuItem>
          </Select>
        </FormControl>
      </div>
      <SafeApexCharts
        options={options}
        series={series}
        type="line"
        width="100%"
        height={220}
      />
    </div>
  );
};

export default DashboardLineChart;
