import CopyIcon from "@icons/CopyIcon";
import {
  Box,
  IconButton,
  InputAdornment,
  TextField as MuiTextField,
  TextFieldProps,
  Typography,
  useTheme,
} from "@mui/material";
import { FC } from "react";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

interface Props {
  scriptText: string;
  helperText: string;
}

export default function WidgetScript({ scriptText, helperText }: Props) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        p: "20px",
      }}
    >
      <Typography color="#9A9AAF">{helperText}</Typography>
      <TextField
        multiline
        value={scriptText}
        sx={{
          mt: "16px",
          width: "100%",
          "& .MuiInputBase-root": {
            width: "100%",
            backgroundColor: theme.palette.background.default,
            fontSize: "16px",
            color: "#4D4D4D",
            alignItems: "flex-start",
          },
        }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                onClick={() => {
                  navigator.clipboard.writeText(scriptText);
                }}
                edge="end"
                sx={{ marginTop: "22px" }}
              >
                <CopyIcon
                  color={"#ffffff"}
                  bgcolor={theme.palette.brightPurple.main}
                />
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
    </Box>
  );
}