import * as React from 'react';
import { ReactQuillProps } from 'react-quill';
import { UseFormReturn } from 'react-hook-form';
import { MuiOtpInputProps } from 'mui-one-time-password-input';
import { FileRejection, DropzoneOptions } from 'react-dropzone';

import { SliderProps } from '@mui/material/Slider';
import { Theme, SxProps } from '@mui/material/styles';
import { TextFieldProps } from '@mui/material/TextField';
import { RadioGroupProps } from '@mui/material/RadioGroup';
import { FormControlProps } from '@mui/material/FormControl';
import { AutocompleteProps } from '@mui/material/Autocomplete';
import { FormControlLabelProps } from '@mui/material/FormControlLabel';

export type IFormProviderProps = {
  children: React.ReactNode;
  methods: UseFormReturn<any>;
  onSubmit?: VoidFunction;
};

export type IRHFTextFieldProps = TextFieldProps & {
  name: string;
};

export type IRHFSelectProps = TextFieldProps & {
  name: string;
  native?: boolean;
  maxHeight?: boolean | number;
  children: React.ReactNode;
  PaperPropsSx?: SxProps<Theme>;
};

export type IRHFMultiSelectProps = FormControlProps & {
  name: string;
  label?: string;
  chip?: boolean;
  checkbox?: boolean;
  placeholder?: string;
  helperText?: React.ReactNode;
  options: {
    label: string;
    value: string;
  }[];
};

export interface IAutoCompleteCountry {
  label: string;
  phone: string;
  code: string;
  suggested?: boolean;
}

export interface IRHFAutocompleteProps<
  T,
  Multiple extends boolean | undefined,
  DisableClearable extends boolean | undefined,
  FreeSolo extends boolean | undefined,
> extends AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
  name: string;
  label?: string;
  placeholder?: string;
  type?: 'country' | string;
  helperText?: React.ReactNode;
  valuePropName?: string;
  autoCompleteCountries?: IAutoCompleteCountry[];
  getSelectedValues?: (values: any) => void;
}

export interface IRHFSwitchProps extends Omit<FormControlLabelProps, 'control'> {
  name: string;
  helperText?: React.ReactNode;
}

export interface IRHFUploadProps extends Omit<IUploadProps, 'file'> {
  name: string;
  multiple?: boolean;
}

export interface IRHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
  name: string;
  helperText?: React.ReactNode;
}

export interface IRHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
  name: string;
  options: { label: string; value: any }[];
  row?: boolean;
  label?: string;
  spacing?: number;
  helperText?: React.ReactNode;
}

export type IRHFCodesProps = MuiOtpInputProps & {
  name: string;
};

export interface IEditorProps extends ReactQuillProps {
  error?: boolean;
  simple?: boolean;
  helperText?: React.ReactNode;
  sx?: SxProps<Theme>;
  reactQuillFormats?: string[];
}

export interface IRHFEditorProps extends IEditorProps {
  name: string;
}

export type IEditorToolbarProps = {
  id: string;
  simple?: boolean;
};
export type IRHFRadioGroupProps = RadioGroupProps & {
  name: string;
  options: { label: string; value: any }[];
  label?: string;
  spacing?: number;
  helperText?: React.ReactNode;
};

export type IRHFSliderProps = SliderProps & {
  name: string;
  helperText?: React.ReactNode;
};

export interface ICustomFile extends File {
  path?: string;
  preview?: string;
  lastModifiedDate?: Date;
}

export interface IUploadProps extends DropzoneOptions {
  error?: boolean;
  sx?: SxProps<Theme>;
  thumbnail?: boolean;
  placeholder?: React.ReactNode;
  helperText?: React.ReactNode;
  disableMultiple?: boolean;
  file?: ICustomFile | string | null;
  onDelete?: VoidFunction;
  files?: (File | string)[];
  onUpload?: VoidFunction;
  onRemove?: (file: ICustomFile | string) => void;
  onRemoveAll?: VoidFunction;
}

export type IRejectionFileProps = {
  fileRejections: FileRejection[];
};

export type ISingleFilePreviewProps = {
  imgUrl?: string;
};

export type IRHFPhoneNumberProps = TextFieldProps & {
  name: string;
};

declare module '@mui/material/styles/createPalette' {
  interface TypeBackground {
    neutral: string;
  }
  interface SimplePaletteColorOptions {
    lighter: string;
    darker: string;
  }
  interface PaletteColor {
    lighter: string;
    darker: string;
  }
}

export const REACT_QUILL_FORMATS = [
  'align',
  'background',
  'blockquote',
  'bold',
  'bullet',
  'code',
  'code-block',
  'color',
  'direction',
  'font',
  'formula',
  'header',
  'image',
  'indent',
  'italic',
  'link',
  'list',
  'script',
  'size',
  'strike',
  'table',
  'underline',
  'video',
];

export const STYLED_HEADINGS = [
  'Heading 1',
  'Heading 2',
  'Heading 3',
  'Heading 4',
  'Heading 5',
  'Heading 6',
];

export interface ICustomShadows {
  z1: string;
  z4: string;
  z8: string;
  z12: string;
  z16: string;
  z20: string;
  z24: string;
  primary: string;
  secondary: string;
  info: string;
  success: string;
  warning: string;
  error: string;
  card: string;
  dialog: string;
  dropdown: string;
}

declare module '@mui/material/styles' {
  interface Theme {
    customShadows: ICustomShadows;
  }
  interface ThemeOptions {
    customShadows?: ICustomShadows;
  }
}