import type { ReactNode, SyntheticEvent } from 'react'
import type { SxProps, Theme } from '@mui/material'
import type { BaseWidgetState } from '../stores/types'

export interface WrapperProps
  extends Pick<
      WrapperUIProps,
      'sx' | 'actions' | 'options' | 'labels' | 'children' | 'onChangeCollapsed'
    >,
    Pick<WrapperState, 'disabled' | 'title'> {
  id: WrapperState['id']
  defaultCollapsed?: boolean
}

export type WrapperState<T = unknown> = BaseWidgetState<
  T & {
    title: string
    disabled?: boolean
    collapsed?: boolean
    isLoading?: boolean
  }
>

export interface WrapperUIProps
  extends WrapperActionsProps,
    Omit<WrapperOptionsProps, 'labels' | ''> {
  id: WrapperState['id']
  children: ReactNode
  sx?: SxProps<Theme>
  labels?: {
    options?: WrapperOptionsProps['labels']
  }
  onChangeCollapsed?: (
    event: SyntheticEvent<Element, Event>,
    collapsed: boolean,
  ) => void
}

export interface WrapperActionsProps {
  actions?: ReactNode[]
}

export interface WrapperOptionsProps {
  labels?: {
    title: string
  }
  options?: WrapperOption[]
}

export interface WrapperOption {
  label: string
  disabled?: boolean
  icon?: ReactNode
  onClick: () => void
}