import { Box } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import type {} from "@mui/x-date-pickers/themeAugmentation";
import React from "react";
import WidgetWizard from "./components/widgetWizard";
import { DarkestBlueGray, LightBlueGray } from "./utility/colors";

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "&:focus": {
            boxShadow: "none",
            borderColor: "none",
          },
        },
      },
    },
    MuiPickersTextField: {
      styleOverrides: {
        root: {
          backgroundColor: "#FFF",
          width: "100%",
          "&.Mui-disabled": {
            backgroundColor: "#F5F5F5",
            color: "#666",
          },
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          width: "100%",
          borderRadius: "5px 5px 0 0",
          fieldset: {
            borderColor: LightBlueGray,
          },
          "& .MuiInputLabel-asterisk": {
            color: "red",
          },
          "& .MuiOutlinedInput-root": {
            background: "#FFF",
            borderRadius: "5px 5px 0 0",
            borderColor: LightBlueGray,
          },
          "& .MuiFormHelperText-root": {
            color: DarkestBlueGray,
            fontSize: "12px",
          },
          "& .MuiInputBase-input": {
            backgroundColor: "#FFF",
            "&:focus": {
              boxShadow: "none",
              borderColor: "none",
            },
          },

          "& .MuiPickersInputBase-root": {
            backgroundColor: "#FFF",
            "&:focus": {
              boxShadow: "none",
              borderColor: "none",
            },
          },
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        root: {
          width: "100%",
          borderRadius: "5px 5px 0 0",
          fieldset: {
            borderColor: LightBlueGray,
          },
          "& .MuiSelect-select": {
            backgroundColor: "#FFF",
            "&:focus": {
              boxShadow: "none",
              borderColor: "none",
            },
          },
        },
      },
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          background: LightBlueGray,
          color: DarkestBlueGray,
          fontSize: "12px",
          margin: 0,
          padding: "5px 10px",
          borderTopLeftRadius: "0px",
          borderTopRightRadius: "0px",
          borderBottomLeftRadius: "4px",
          borderBottomRightRadius: "4px",
        },
      },
    },
  },
});

type CoreWidgetWizardProps = {
  accountid: string;
  accesstoken: string;
  pathforaconfig: string;
  availableaudiences: string;
  availablecollections: string;
  availablefields: string;
  availablepersonalizationkeys: string;
  availableflows: string;
  titlefield: string;
  descriptionfield: string;
  statusfield: string;
  configurationfield: string;
};

const CoreWidgetWizard: React.FC<CoreWidgetWizardProps> = ({
  accountid,
  accesstoken,
  pathforaconfig,
  availableaudiences,
  availablepersonalizationkeys,
  availableflows,
  availablecollections,
  availablefields,
  titlefield,
  descriptionfield,
  statusfield,
  configurationfield,
}) => {
  // url decode the pathfora config
  try {
    pathforaconfig = atob(pathforaconfig);
  } catch (_e) {
    pathforaconfig = "";
  }

  return (
    <Box p={0} mb={2} bgcolor="#FFF">
      <ThemeProvider theme={theme}>
        <WidgetWizard
          accountid={accountid || ""}
          accesstoken={accesstoken || ""}
          pathforaconfig={pathforaconfig || ""}
          availableaudiences={availableaudiences || ""}
          availablecollections={availablecollections || ""}
          availableflows={availableflows || ""}
          availablepersonalizationkeys={availablepersonalizationkeys || ""}
          availablefields={availablefields || ""}
          titlefield={titlefield || "edit-title"}
          descriptionfield={descriptionfield || "edit-description"}
          statusfield={statusfield || "edit-status"}
          configurationfield={configurationfield || "edit-configuration"}
        />
      </ThemeProvider>
    </Box>
  );
};

export default CoreWidgetWizard;