import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import { useTheme } from "@mui/material/styles";

import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import CodeIcon from "@mui/icons-material/Code";
import FormatBoldIcon from "@mui/icons-material/FormatBold";
import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
import FormatItalicIcon from "@mui/icons-material/FormatItalic";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
import LinkIcon from "@mui/icons-material/Link";
import RedoIcon from "@mui/icons-material/Redo";
import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
import UndoIcon from "@mui/icons-material/Undo";

import { getBorderColor } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/add-working-group-issue-dialog-styles";

type EditorBoxProps = {
  onChange: (value: string) => void;
  placeholder: string;
  value: string;
};

function ToolbarIcon({ children }: { children: ReactNode }) {
  const theme = useTheme();

  return (
    <IconButton
      size="small"
      sx={{
        width: 18,
        height: 18,
        p: 0,
        color: theme.palette.text.secondary,
        "& svg": {
          fontSize: 12,
        },
        "&:hover": {
          bgcolor: "transparent",
          color: theme.palette.text.primary,
        },
      }}
    >
      {children}
    </IconButton>
  );
}

export function EditorBox({ onChange, placeholder, value }: EditorBoxProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        border: `1px solid ${getBorderColor(theme)}`,
        borderRadius: "6px",
        minHeight: 104,
        bgcolor: theme.palette.background.paper,
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          height: 30,
          px: 1,
          display: "flex",
          alignItems: "center",
          gap: 0.2,
        }}
      >
        <ToolbarIcon><UndoIcon /></ToolbarIcon>
        <ToolbarIcon><RedoIcon /></ToolbarIcon>
        <ToolbarIcon><FormatListBulletedIcon /></ToolbarIcon>
        <ToolbarIcon><ArrowDropDownIcon /></ToolbarIcon>
        <ToolbarIcon>
          <FormatColorFillIcon sx={{ color: theme.palette.text.primary }} />
        </ToolbarIcon>
        <ToolbarIcon><FormatBoldIcon /></ToolbarIcon>
        <ToolbarIcon><FormatItalicIcon /></ToolbarIcon>
        <ToolbarIcon><FormatUnderlinedIcon /></ToolbarIcon>
        <ToolbarIcon><StrikethroughSIcon /></ToolbarIcon>
        <ToolbarIcon><CodeIcon /></ToolbarIcon>
        <ToolbarIcon><FormatListBulletedIcon /></ToolbarIcon>
        <ToolbarIcon><LinkIcon /></ToolbarIcon>
        <ToolbarIcon><CodeIcon /></ToolbarIcon>
        <ToolbarIcon><FormatQuoteIcon /></ToolbarIcon>
        <ToolbarIcon><HorizontalRuleIcon /></ToolbarIcon>
      </Box>

      <TextField
        fullWidth
        multiline
        minRows={3}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        variant="standard"
        slotProps={{
          input: {
            disableUnderline: true,
          },
        }}
        sx={{
          px: 1.3,
          "& textarea": {
            fontSize: 12,
            color: theme.palette.text.primary,
          },
          "& textarea::placeholder": {
            color: theme.palette.text.secondary,
            opacity: 1,
          },
        }}
      />
    </Box>
  );
}