import React, { forwardRef } from 'react';
import type { CheckboxProps, Theme } from '@mui/material';
import { iconButtonClasses } from '@mui/material';
import { gridClasses } from '@mui/x-data-grid-pro';
import { pickersLayoutClasses } from '@mui/x-date-pickers';
import { dateRangeCalendarClasses } from '@mui/x-date-pickers-pro';
import { KeyboardArrowDownRounded } from '@mui/icons-material';

import PickersActionBar from './@extendedComponents/CustomActionBar/CustomActionBar';
import MuiAccordion from './Accordion/Accordion.api';
import MuiAccordionActions from './AccordionActions/AccordionActions.api';
import MuiAccordionDetails from './AccordionDetails/AccordionDetails.api';
import MuiAccordionSummary from './AccordionSummary/AccordionSummary.api';
import MuiAlert from './Alert/Alert.api';
import MuiAlertTitle from './AlertTitle/AlertTitle.api';
import MuiAppBar from './AppBar/AppBar.api';
import MuiAutocomplete from './Autocomplete/Autocomplete.api';
import MuiAvatar from './Avatar/Avatar.api';
import MuiAvatarGroup from './AvatarGroup/AvatarGroup.api';
import MuiBackdrop from './Backdrop/Backdrop.api';
import MuiBadge from './Badge/Badge.api';
import MuiBottomNavigation from './BottomNavigation/BottomNavigation.api';
import MuiBottomNavigationAction from './BottomNavigationAction/BottomNavigationAction.api';
import MuiBreadcrumbs from './Breadcrumbs/Breadcrumbs.api';
import MuiButton from './Button/Button.api';
import MuiButtonBase from './ButtonBase/ButtonBase.api';
import MuiButtonGroup from './ButtonGroup/ButtonGroup.api';
import MuiCard from './Card/Card.api';
import MuiCardActionArea from './CardActionArea/CardActionArea.api';
import MuiCardActions from './CardActions/CardActions.api';
import MuiCardContent from './CardContent/CardContent.api';
import MuiCardHeader from './CardHeader/CardHeader.api';
import MuiCardMedia from './CardMedia/CardMedia.api';
import Checkbox from './Checkbox/Checkbox';
import MuiCheckbox from './Checkbox/Checkbox.api';
import MuiChip from './Chip/Chip.api';
import MuiCircularProgress from './CircularProgress/CircularProgress.api';
import MuiCollapse from './Collapse/Collapse.api';
import MuiContainer from './Container/Container.api';
import MuiCssBaseline from './CssBaseline/CssBaseline.api';
import MuiDialog from './Dialog/Dialog.api';
import MuiDialogActions from './DialogActions/DialogActions.api';
import MuiDialogContent from './DialogContent/DialogContent.api';
import MuiDialogContentText from './DialogContentText/DialogContentText.api';
import MuiDialogTitle from './DialogTitle/DialogTitle.api';
import MuiDivider from './Divider/Divider.api';
import MuiDrawer from './Drawer/Drawer.api';
import MuiFab from './Fab/Fab.api';
import MuiFilledInput from './FilledInput/FilledInput.api';
import MuiFormControl from './FormControl/FormControl.api';
import MuiFormControlLabel from './FormControlLabel/FormControlLabel.api';
import MuiFormGroup from './FormGroup/FormGroup.api';
import MuiFormHelperText from './FormHelperText/FormHelperText.api';
import MuiFormLabel from './FormLabel/FormLabel.api';
import MuiGrid from './Grid/Grid.api';
import MuiIcon from './Icon/Icon.api';
import IconButton from './IconButton/IconButton';
import MuiIconButton from './IconButton/IconButton.api';
import MuiImageList from './ImageList/ImageList.api';
import MuiImageListItem from './ImageListItem/ImageListItem.api';
import MuiImageListItemBar from './ImageListItemBar/ImageListItemBar.api';
import MuiInput from './Input/Input.api';
import MuiInputAdornment from './InputAdornment/InputAdornment.api';
import MuiInputBase from './InputBase/InputBase.api';
import MuiInputLabel from './InputLabel/InputLabel.api';
import MuiLinearProgress from './LinearProgress/LinearProgress.api';
import MuiLink from './Link/Link.api';
import MuiList from './List/List.api';
import MuiListItem from './ListItem/ListItem.api';
import MuiListItemAvatar from './ListItemAvatar/ListItemAvatar.api';
import MuiListItemButton from './ListItemButton/ListItemButton.api';
import MuiListItemIcon from './ListItemIcon/ListItemIcon.api';
import MuiListItemText from './ListItemText/ListItemText.api';
import MuiListSubheader from './ListSubheader/ListSubheader.api';
import MuiMenu from './Menu/Menu.api';
import MuiMenuItem from './MenuItem/MenuItem.api';
import MuiMenuList from './MenuList/MenuList.api';
import MuiMobileStepper from './MobileStepper/MobileStepper.api';
import MuiModal from './Modal/Modal.api';
import MuiNativeSelect from './NativeSelect/NativeSelect.api';
import MuiOutlinedInput from './OutlinedInput/OutlinedInput.api';
import MuiPagination from './Pagination/Pagination.api';
import MuiPaginationItem from './PaginationItem/PaginationItem.api';
import MuiPaper from './Paper/Paper.api';
import MuiPopover from './Popover/Popover.api';
import MuiPopper from './Popper/Popper.api';
import MuiPortal from './Portal/Portal.api';
import MuiRadio from './Radio/Radio.api';
import MuiRadioGroup from './RadioGroup/RadioGroup.api';
import MuiRating from './Rating/Rating.api';
import MuiSelect from './Select/Select.api';
import MuiSkeleton from './Skeleton/Skeleton.api';
import MuiSlide from './Slide/Slide.api';
import MuiSlider from './Slider/Slider.api';
import MuiSnackbar from './Snackbar/Snackbar.api';
import MuiSnackbarContent from './SnackbarContent/SnackbarContent.api';
import MuiSpeedDial from './SpeedDial/SpeedDial.api';
import MuiSpeedDialAction from './SpeedDialAction/SpeedDialAction.api';
import MuiSpeedDialIcon from './SpeedDialIcon/SpeedDialIcon.api';
import MuiStack from './Stack/Stack.api';
import MuiStep from './Step/Step.api';
import MuiStepButton from './StepButton/StepButton.api';
import MuiStepConnector from './StepConnector/StepConnector.api';
import MuiStepContent from './StepContent/StepContent.api';
import MuiStepIcon from './StepIcon/StepIcon.api';
import MuiStepLabel from './StepLabel/StepLabel.api';
import MuiStepper from './Stepper/Stepper.api';
import MuiSvgIcon from './SvgIcon/SvgIcon.api';
import MuiSwipeableDrawer from './SwipeableDrawer/SwipeableDrawer.api';
import MuiSwitch from './Switch/Switch.api';
import MuiTab from './Tab/Tab.api';
import MuiTable from './Table/Table.api';
import MuiTableBody from './TableBody/TableBody.api';
import MuiTableCell from './TableCell/TableCell.api';
import MuiTableContainer from './TableContainer/TableContainer.api';
import MuiTableFooter from './TableFooter/TableFooter.api';
import MuiTableHead from './TableHead/TableHead.api';
import MuiTablePagination from './TablePagination/TablePagination.api';
import MuiTableRow from './TableRow/TableRow.api';
import MuiTableSortLabel from './TableSortLabel/TableSortLabel.api';
import MuiTabs from './Tabs/Tabs.api';
import MuiTabScrollButton from './TabScrollButton/TabScrollButton.api';
import TextField from './TextField/TextField';
import MuiTextField from './TextField/TextField.api';
import MuiToggleButton from './ToggleButton/ToggleButton.api';
import MuiToggleButtonGroup from './ToggleButtonGroup/ToggleButtonGroup.api';
import MuiToolbar from './Toolbar/Toolbar.api';
import MuiTooltip from './Tooltip/Tooltip.api';
import MuiTypography from './Typography/Typography.api';

export default function ComponentsOverrides(theme: Theme) {
  const scheme = {
    MuiAccordion,
    MuiAccordionActions,
    MuiAccordionDetails,
    MuiAccordionSummary,
    MuiAlert,
    MuiAlertTitle,
    MuiAppBar,
    MuiAutocomplete,
    MuiAvatar,
    MuiAvatarGroup,
    MuiBackdrop,
    MuiBadge,
    MuiBottomNavigation,
    MuiBottomNavigationAction,
    MuiBreadcrumbs,
    MuiButton,
    MuiButtonBase,
    MuiButtonGroup,
    MuiCard,
    MuiCardActionArea,
    MuiCardActions,
    MuiCardContent,
    MuiCardHeader,
    MuiCardMedia,
    MuiCheckbox,
    MuiChip,
    MuiCircularProgress,
    MuiCollapse,
    MuiContainer,
    MuiCssBaseline,
    MuiDialog,
    MuiDialogActions,
    MuiDialogContent,
    MuiDialogContentText,
    MuiDialogTitle,
    MuiDivider,
    MuiDrawer,
    MuiFab,
    MuiFilledInput,
    MuiFormControl,
    MuiFormControlLabel,
    MuiFormGroup,
    MuiFormHelperText,
    MuiFormLabel,
    MuiGrid,
    MuiIcon,
    MuiIconButton,
    MuiImageList,
    MuiImageListItem,
    MuiImageListItemBar,
    MuiInput,
    MuiInputAdornment,
    MuiInputBase,
    MuiInputLabel,
    MuiLinearProgress,
    MuiLink,
    MuiList,
    MuiListItem,
    MuiListItemAvatar,
    MuiListItemButton,
    MuiListItemIcon,
    MuiListItemText,
    MuiListSubheader,
    MuiMenu,
    MuiMenuItem,
    MuiMenuList,
    MuiMobileStepper,
    MuiModal,
    MuiNativeSelect,
    MuiOutlinedInput,
    MuiPagination,
    MuiPaginationItem,
    MuiPaper,
    MuiPopover,
    MuiPopper,
    MuiPortal,
    MuiRadio,
    MuiRadioGroup,
    MuiRating,
    MuiSelect,
    MuiSkeleton,
    MuiSlide,
    MuiSlider,
    MuiSnackbar,
    MuiSnackbarContent,
    MuiSpeedDial,
    MuiSpeedDialAction,
    MuiSpeedDialIcon,
    MuiStack,
    MuiStep,
    MuiStepButton,
    MuiStepConnector,
    MuiStepContent,
    MuiStepIcon,
    MuiStepLabel,
    MuiStepper,
    MuiSvgIcon,
    MuiSwipeableDrawer,
    MuiSwitch,
    MuiTab,
    MuiTabScrollButton,
    MuiTable,
    MuiTableBody,
    MuiTableCell,
    MuiTableContainer,
    MuiTableFooter,
    MuiTableHead,
    MuiTablePagination,
    MuiTableRow,
    MuiTableSortLabel,
    MuiTabs,
    MuiTextField,
    MuiToggleButton,
    MuiToggleButtonGroup,
    MuiToolbar,
    MuiTooltip,
    MuiTypography,

    // MuiLocalizationProvider: () => ({}),
    MuiUseMediaQuery: {
      defaultProps: {
        noSsr: true,
      },
    },

    MuiDataGrid: {
      defaultProps: {
        components: {
          BaseCheckbox: forwardRef<HTMLButtonElement, CheckboxProps>((props, ref) => (
            <Checkbox {...props} size="small" ref={ref} />
          )),
        },
      },
      styleOverrides: {
        root: {
          boxShadow: theme.shadows[5],
          border: 0,
        },
        row: {
          borderBottom: `1px solid ${theme.palette.divider}`,
          '[data-field=actions] > *': {
            opacity: 0,
            visibility: 'hidden',
          },
          '&:hover': {
            '[data-field=actions] > *': {
              opacity: 1,
              visibility: 'visible',
            },
          },
        },
        columnHeaders: {
          border: 0,
        },
        columnHeader: {
          fontSize: 'var(--internal-row-font-size)',
          paddingRight: '12px',
          paddingLeft: '12px',

          [`&.${gridClasses['columnHeader--alignCenter']}`]: {
            paddingRight: 0,
            paddingLeft: 0,
          },
        },
        cell: {
          position: 'relative',
          padding: '0',
          border: 0,

          [`&.${gridClasses['cell--editing']}`]: {
            boxShadow: 'none',
            padding: 0,
          },
        },
        footerContainer: {
          minHeight: 'var(--internal-row-height)',
          fontSize: 'var(--internal-row-font-size)',
          borderTopColor: theme.palette.divider,
        },
        columnSeparator: {
          color: theme.palette.divider,
        },
        editable: {
          boxShadow: 'none',
        },
      },
    },
    MuiSimpleTreeView: {
      styleOverrides: {
        root: {
          width: '100%',
          maxHeight: '100%',
          overflowY: 'auto',
        },
      },
    },
    MuiTreeItem: {
      styleOverrides: {
        label: {
          ...theme.typography.body2,
          color: theme.palette.text.primary,
        },
        // iconContainer: { width: 'auto' },
      },
    },
    MuiClockPicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
      },
      styleOverrides: {
        root: {
          [`& .${iconButtonClasses.root}`]: {
            bottom: '8px',
          },
        },
      },
    },
    MuiMultiSectionDigitalClockSection: {
      styleOverrides: {
        root: {
          '&:after': {
            height: 0,
          },
        },
      },
    },
    MuiDatePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
      },
    },
    MuiStaticDatePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
      },
    },
    MuiDateRangePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
      },
    },
    MuiStaticDateRangePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
      },
    },
    MuiDateRangePickerDay: {
      defaultProps: {
        color: 'primary',
      },
    },
    MuiDateTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiStaticDateTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiDesktopDatePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiDesktopDateRangePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
      },
    },
    MuiDesktopDateTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiDesktopTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiMobileDatePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
      },
    },
    MuiMobileDateRangePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
      },
    },
    MuiMobileDateTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiMobileTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiMonthPicker: {
      defaultProps: {
        color: 'primary',
      },
      enableAccessibleFieldDOMStructure: false,
      slots: {
        actionBar: PickersActionBar,
        textField: TextField,
      },
    },
    MuiStaticTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiTimePicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
        timeSteps: { hours: 1, minutes: 1, seconds: 1 },
      },
    },
    MuiPickersDay: {
      defaultProps: {
        color: 'primary',
        disableMargin: true,
      },
      styleOverrides: {
        root: {
          transform: 'scale(1.1)',
        },
      },
    },
    MuiPickersCalendarHeader: {
      defaultProps: {
        color: 'primary',
        slots: {
          switchViewIcon: KeyboardArrowDownRounded,
        },
      },
    },
    MuiPickersLayout: {
      styleOverrides: {
        root: {
          [`& .${pickersLayoutClasses.actionBar}`]: {
            paddingTop: '12px',
          },
        },
      },
    },
    MuiPickersToolbar: {
      styleOverrides: {
        content: {
          minHeight: '32px',
        },
      },
    },
    MuiPickersToolbarButton: {
      styleOverrides: {
        root: {
          minHeight: 'auto',
        },
      },
    },
    MuiPickersToolbarText: {
      styleOverrides: {
        root: {
          fontSize: '18px',
        },
      },
    },
    MuiDatePickerToolbar: {
      styleOverrides: {
        title: {
          fontSize: '18px',
        },
      },
    },
    MuiDateCalendar: {
      styleOverrides: {
        root: {
          // maxHeight: '370px',
          // height: 'auto',
        },
      },
    },
    MuiDayCalendar: {
      styleOverrides: {
        header: {
          gap: '4px',
        },
        slideTransition: {
          minHeight: '250px',
        },
        weekContainer: {
          gap: '4px',
          marginTop: '4px',
          marginBottom: '4px',

          [`.${dateRangeCalendarClasses.monthContainer} &`]: {
            gap: 0,
            marginTop: 0,
            marginBottom: '2px',
          },
        },
        weekDayLabel: {
          marginLeft: 0,
          marginRight: 0,
        },
      },
    },
    MuiYearPicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
      },
      styleOverrides: {
        slideTransition: {
          minHeight: '250px',
        },
      },
    },
    MuiPickersArrowSwitcher: {
      defaultProps: {
        color: 'primary',
      },
      styleOverrides: {
        spacer: {
          width: 0,
        },
        button: {
          marginLeft: 0,
          marginRight: 0,
        },
      },
    },
    MuiDayPicker: {
      defaultProps: {
        color: 'primary',
        enableAccessibleFieldDOMStructure: false,
        slots: {
          actionBar: PickersActionBar,
          textField: TextField,
          openPickerButton: (props: object) => <IconButton {...props} edge={false} />,
        },
      },
    },
    MuiDateRangePickerInput: {
      width: '100%',
    },
    MuiDateTimePickerToolbar: {
      styleOverrides: {
        dateContainer: {
          flexDirection: 'row',
          gap: '4px',
        },
        separator: {
          display: 'flex',
          alignItems: 'center',
        },
      },
    },
    MuiTimeClock: {
      styleOverrides: {
        arrowSwitcher: {
          top: 0,
          right: 0,
        },
      },
    },
  };

  return Object.entries(scheme).reduce((acc: Record<string, unknown>, [key, fnParams]) => {
    acc[key] = typeof fnParams === 'function' ? fnParams(theme) : fnParams;

    return acc;
  }, {});
}
