import React from "react";
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import { createTheme, ThemeProvider} from "@mui/material/styles";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";

interface Option {
  label: string;
  value?: any;
}

interface MultipleAutoCompleteCSProps extends FormElementProps<any> {
  options: Option[];
  variant: "standard" | "outlined" | "filled";
  defaultLabel: string,
  elementSize: "small" | "medium" ;
}

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: 'var(--primaryForeground)', // Label text color
          fontSize: '1.2rem', // Label font size

        },
      },
    },
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          backgroundColor: 'var(--primaryBackground)', // Root background color
        },
        listbox: {
          fontSize: '1.2rem', // Listbox text size
          color: 'var(--secondaryForeground)', // Listbox text color
          backgroundColor: 'var(--primaryBackground)', // Listbox background color
          border: '1px solid var(--primaryForeground)', // Listbox border color
        },
        endAdornment: {
          color: 'var(--primaryForeground)', // Default end adornment color
        },
        
        popupIndicator:{
          color: 'var(--primaryForeground)', // Default arrow icon color
          backgroundColor: 'var(--primaryBackground)', // Listbox background color
        },
        clearIndicator: {
          color: 'var(--primaryForeground)', // Default clear icon color
          '&:hover': {
            color: 'var(--secondaryForeground)', // Clear icon color on hover
          },
        },
        paper: {
          backgroundColor: 'var(--primaryBackground)', // Paper background color
          color: 'var(--primaryForeground)', // Paper text color
          },
        inputRoot: {
          color: 'var(--primaryForeground)', // Input text color

          // Styles for the input area
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: 'var(--primaryForeground)',
            },
            '&:hover fieldset': {
              borderColor: 'var(--primaryForeground)',
            },
            '&.Mui-focused fieldset': {
              borderColor: 'var(--primaryForeground)',
            },
          },
          '& .MuiChip-root': {
            fontSize: '1.2rem', // Chip text size
            backgroundColor: 'var(--buttonBackground)', // Chip background color
            color: 'var(--buttonForeground)', // Chip text color
            border: '1px solid var(--buttonBorder)', // Border for the chip
            '& .MuiChip-deleteIcon': {
              color: 'var(--buttonForeground)', // Delete icon color
              '&:hover': {
                color: 'var(--buttonForeground)', // Delete icon hover color
              },
            },
          },
        },
      },
    },
  },
});

/**
 * A Workflow element built using React.
 * @displayName Multiple AutoComplete CS
 * @description Multiple AutoComplete V11
 * @param props The props that will be provided by the Workflow runtime.
 */

function MultipleAutoCompleteCS(
  props: MultipleAutoCompleteCSProps
): React.ReactElement {
  const { value,defaultLabel, variant, options, setValue , elementSize} = props;


  return (
    <ThemeProvider theme={theme}>
    <Autocomplete
      value={value || []}
      options={options || []}
      size={elementSize}
      getOptionLabel={(option: Option) => option.label || ""}
      onChange={(event, newValue) => {
        if (setValue) {
          setValue(newValue);
        }
      }}
      multiple={true}
      renderInput={(params) => (
        <TextField {...params} placeholder={defaultLabel} variant={variant} />
      )}
    />
    </ThemeProvider>
  );
}

const MultipleAutoCompleteCSElementRegistration: FormElementRegistration<MultipleAutoCompleteCSProps> =
  {
    component: MultipleAutoCompleteCS,
    getInitialProperties: () => ({
      defaultLabel: "Default Label", // Provide a default label here
      variant: "outlined", // Provide a default variant here
      autocompleteType: "autoComplete", // Provide a default autocomplete type here
      elementSize: "small", // Provide a default element size here
      options: [
        { label: "Option 1", value: 1 },
        { label: "Option 2", value: 2 },
        { label: "Option 3", value: 3 },
        { label: "Option 4", value: 4 },
      ], // Sample options
      initiatorValue: [{ label: "Option 1", value: 1 }]
    }),
    id: "MultipleAutoCompleteCS",
  };

export default MultipleAutoCompleteCSElementRegistration;