"use client";

import {
  Box,
  Button,
  InputAdornment,
  TextField,
} from "@mui/material";

import {
  TRANSLATION_MODULES,
} from "../constants/translation-modules";

import type {
  TranslationModuleFilter,
} from "../hook/use-translation-page-groups";

type Props = {
  moduleFilter: TranslationModuleFilter;
  search: string;
  allModulesLabel: string;
  searchPlaceholder: string;
  onModuleChange: (
    value: TranslationModuleFilter,
  ) => void;
  onSearchChange: (
    value: string,
  ) => void;
};

export default function TranslationManagementFilters({
  moduleFilter,
  search,
  allModulesLabel,
  searchPlaceholder,
  onModuleChange,
  onSearchChange,
}: Props) {
  return (
    <Box sx={{ mb: 2 }}>
      <Box
        sx={{
          display: "flex",
          flexDirection: {
            xs: "column",
            lg: "row",
          },
          alignItems: {
            xs: "stretch",
            lg: "center",
          },
          justifyContent: "space-between",
          gap: 2,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: 1,
          }}
        >
          <Button
            variant={
              moduleFilter === "all"
                ? "contained"
                : "outlined"
            }
            onClick={() =>
              onModuleChange("all")
            }
            sx={{
              minHeight: 42,
              borderRadius: 2,
              textTransform: "none",
              fontWeight: 700,
            }}
          >
            {allModulesLabel}
          </Button>

          {TRANSLATION_MODULES.map(
            (module) => (
              <Button
                key={module.value}
                variant={
                  moduleFilter ===
                  module.value
                    ? "contained"
                    : "outlined"
                }
                onClick={() =>
                  onModuleChange(
                    module.value,
                  )
                }
                sx={{
                  minHeight: 42,
                  textTransform: "none",
                  fontWeight: 700,
                }}
              >
                {module.label}
              </Button>
            ),
          )}
        </Box>

        <TextField
          size="small"
          value={search}
          placeholder={searchPlaceholder}
          onChange={(event) =>
            onSearchChange(
              event.target.value,
            )
          }
          slotProps={{
            input: {
              startAdornment: (
                <InputAdornment position="start">
                  <Box
                    component="span"
                    sx={{
                      color:
                        "text.secondary",
                    }}
                  >
                    ⌕
                  </Box>
                </InputAdornment>
              ),
            },
          }}
          sx={{
            width: {
              xs: "100%",
              lg: 360,
              xl: 420,
            },
            flexShrink: 0,
            "& .MuiOutlinedInput-root": {
              borderRadius: 2.5,
            },
          }}
        />
      </Box>
    </Box>
  );
}