import { Box, Chip, InputAdornment, Paper, TextField } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import { MultiSelectSearchPanelProps } from "./Interface";

const MultiSelectSearchPanel = ({
  children,
  selectedOptions = [],
  onRemoveChip,
  searchValue = "",
  onSearchChange,
  searchPlaceholder,
  styleConfig = {},
  isDisabled = false,
  appTheme: theme,
  ...paperProps
}: MultiSelectSearchPanelProps) => {
  return (
    <Paper
      {...paperProps}
      sx={{
        borderRadius: "12px !important",
        boxShadow: "0px 4px 20px rgba(0,0,0,0.12) !important",
        border: `1px solid ${theme.myTheme.palette?.secondary?.light}`,
        overflow: "hidden",
        mt: "4px",
        width: "100%",
        ...styleConfig?.paperStyle,
      }}
    >
      {!isDisabled && (
        <Box sx={{ px: 1.5, pt: 1.25, pb: 0.75 }}>
          <TextField
            fullWidth
            size="small"
            value={searchValue}
            onChange={(e) => onSearchChange?.(e.target.value)}
            placeholder={searchPlaceholder || "Search..."}
            onKeyDown={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            onClick={(e) => e.stopPropagation()}
            slotProps={{
              input: {
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon sx={{ fontSize: 18, color: theme.myTheme.palette?.secondary?.contrastText }} />
                  </InputAdornment>
                ),
              },
            }}
            sx={{
              "& .MuiOutlinedInput-root": {
                borderRadius: "8px",
                backgroundColor: "#f5f5f5",
                fontSize: "13px",
                "& fieldset": { borderColor: theme.myTheme.palette?.secondary?.light },
                "&:hover fieldset": { borderColor: theme.myTheme.palette?.secondary?.contrastText },
                "&.Mui-focused fieldset": { borderColor: theme.myTheme.palette?.primary?.main },
              },
              "& input": { padding: "6px 8px 6px 0 !important" },
              ...styleConfig?.searchFieldStyle,
            }}
          />
        </Box>
      )}
      {selectedOptions.length > 0 && (
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: "6px",
            px: 1.5,
            pt: isDisabled ? 1.25 : 0,
            pb: 1,
            borderBottom: "1px solid #f0f0f0",
            maxHeight: "180px",
            overflowY: "auto",
            "&::-webkit-scrollbar": { width: "4px" },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: theme.myTheme.palette?.secondary?.light,
              borderRadius: "4px",
            },
          }}
        >
          {selectedOptions.map((opt: any) => (
            <Chip
              key={opt.value}
              label={opt.label}
              size="small"
              onDelete={
                !isDisabled && onRemoveChip
                  ? () => onRemoveChip?.(opt.value)
                  : undefined
              }
              onMouseDown={(e) => e.stopPropagation()}
              sx={{
                backgroundColor: isDisabled ? "#a0c8ca" : theme.myTheme.palette?.primary?.main,
                color: theme.myTheme.palette?.common?.white,
                borderRadius: "6px",
                height: "26px",
                fontSize: "12px",
                cursor: isDisabled ? "default" : "pointer",
                "& .MuiChip-deleteIcon": {
                  color: theme.myTheme.palette?.common?.white,
                  fontSize: "15px",
                  "&:hover": { color: theme.myTheme.palette?.common?.white },
                },
                ...styleConfig?.chipStyle,
              }}
            />
          ))}
        </Box>
      )}
      {children}
    </Paper>
  );
};

export default MultiSelectSearchPanel;