"use client";

import { useState } from "react";

import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import { alpha, useTheme } from "@mui/material/styles";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { useAppLanguage } from "@/components/providers/app-language-provider";

export function HeaderSearch() {
  const theme = useTheme();
  const { t } = useAppLanguage();

  const [query, setQuery] = useState("");

  const iconFilter =
    theme.palette.mode === "dark" ? "brightness(0) invert(1)" : "none";

  return (
    <Box
      component="form"
      onSubmit={(event) => event.preventDefault()}
      sx={{
        width: { xs: "100%", sm: 260 },
        maxWidth: 260,
        height: 40,
        px: 1.5,
        gap: 1,
        border: `1px solid ${alpha(
          theme.palette.primary.main,
          theme.palette.mode === "dark" ? 0.28 : 0.9,
        )}`,
        borderRadius: "10px",
        backgroundColor:
          theme.palette.mode === "dark"
            ? alpha(theme.palette.background.default, 0.5)
            : theme.palette.background.paper,
        display: "flex",
        alignItems: "center",
        transition: "all 0.2s ease",
        "&:focus-within": {
          borderColor: theme.palette.primary.main,
          boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.12)}`,
        },
      }}
    >
      <DashboardAssetIcon
        src={dashboardAssets.topbarSearch}
        width={18}
        height={18}
        sx={{
          flexShrink: 0,
          filter: iconFilter,
          opacity: theme.palette.mode === "dark" ? 0.92 : 1,
        }}
      />

      <InputBase
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder={t("search")}
        inputProps={{ "aria-label": t("search") }}
        sx={{
          flex: 1,
          color: theme.palette.text.primary,
          fontSize: 14,
          fontWeight: 500,
          "& input": {
            p: 0,
          },
          "& input::placeholder": {
            color: theme.palette.text.secondary,
            opacity: 1,
          },
        }}
      />
    </Box>
  );
}