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

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

interface SingleAutoCompleteCSProps 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 Single AutoComplete
 * @description Single AutoComplete V8
 * @param props The props that will be provided by the Workflow runtime.
 */

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

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

const SingleAutoCompleteCSElementRegistration: FormElementRegistration<SingleAutoCompleteCSProps> =
  {
    component: SingleAutoCompleteCS,
    getInitialProperties: () => ({
      defaultLabel: "Default Label", // Provide a default label here
      variant: "outlined", // Provide a default variant here
      elementSize: "small", // Provide a default element size here
    }),
    id: "SingleAutoCompleteCS",
  };

export default SingleAutoCompleteCSElementRegistration;