import { Binding, Location } from '@adalo/constants'
import { Field } from 'components/Table/TableTypes'

export interface IApp {
  id: string
  name: string
  path: string | null
  DomainId: string | null
  branding: IBranding
  shortURL: string
  libraries: {
    name: string
    version: string
    type: string
  }[]
  webSettings?: {
    previewType: string
    layoutMode?: 'responsive' | 'mobile'
  }
}

export interface IBranding {
  primary: string
  secondary: string
  text: string
  background: string
  fonts?: IFonts | undefined
}

interface IFonts {
  [key: string]: {
    family: string
    variants?: string[]
    category?: string
  }
}

export interface IObject {
  id: string
  actions?: {
    [actionId: string]: {
      actions: IAction[]
      eventType: string
      type: string
    }
  }
  attributes: IAttributes
  children: IObject[]
  layout: ILayout
  link?: {}
  type: TObjectType
  dataBinding?: Binding
  parentIds?: string[]
}

export interface IAction {
  actionType: string
  id: string
  options: {
    target: string
  }
}

export type TObjectType =
  | 'label'
  | 'section'
  | 'ellipse'
  | 'shape'
  | 'wrapper'
  | 'group'
  | 'image'
  | 'list'
  | 'card-view'
  | 'input'
  | 'image-upload'
  | 'file-upload'
  | 'date-picker'
  | 'select'
  | 'form'
  | 'row'
  | 'checkbox'
  | 'column'
  | 'rowSpacer'
  | 'columnSpacer'
  | 'web-view'
  | 'component'
  | 'componentInstance'
  | 'libraryComponent'
  | 'line'
  | 'table'

export interface TableAttributes {
  fields: Field[]
  pageSize: number
  tableRowFontColor: string
  tableRowLineColor: string
  tableColumnFontColor: string
  tableColumnBackgroundColor: string
  tableColumnLineColor: string
  tableRowHoverBackgroundColor: string
  emptyStateTitleText: string
  emptyStateBodyText: string
}

export interface IAttributes extends Partial<TableAttributes> {
  autoFocus?: boolean
  autoWidth?: boolean
  backgroundColor?: string
  backgroundStyle?: 'color' | string
  borderColor?: string
  borderRadius?: number
  borderTopLeftRadius?: number
  borderTopRightRadius?: number
  borderBottomLeftRadius?: number
  borderBottomRightRadius?: number
  borderPosition?: 'inside' | 'center' | 'outside'
  borderStyle?: 'solid' | 'dotted' | 'dashed' | 'none' | undefined
  borderWidth?: number
  color?: 'string'
  defaultValue?: any
  fontFamily?: '@body' | '@heading' | string
  fontSize?: number
  fontStyle?: string
  fontWeight?: string
  height: number
  hidden?: boolean
  inputType?: 'number' | string
  layoutText?: string[] | string
  maxLength?: number | null
  multiline?: boolean
  name: string | null
  opacity?: number
  padding?: number
  placeholder?: string
  placeholderColor?: string
  shadow?: {
    color: string
    enabled: boolean
    size: number
    x: number
    y: number
  }
  selectable?: boolean
  text?: string
  textAlignment?: string
  textColor?: string
  visibility?: Binding
  width: number
  x: number
  y: number
}

export interface ILayout {
  marginBottom?: number
  marginLeft?: number
  marginRight?: number
  marginTop?: number
  paddingBottom?: number
  paddingLeft?: number
  paddingRight?: number
  paddingTop?: number
  height?: number
  width?: number
  zIndex?: number
}

export interface IReduxState {
  data: object
  auth: {
    tokens: {}
    activeAuth: boolean | null
    restartComplete: boolean
    userUsedTemporaryLogin: boolean
  }
  notifications: object
  formInputs: {
    values: {
      [inputId: string]: ReduxFormInputsValue
    }
    defaultValues: {
      [inputId: string]: ReduxFormInputsValue
    }
  }
  random: {
    numbers: Array<object>
  }
  location: {
    code?: number
    location?: Location
    message?: string
  }
  _persist: object
}

type ReduxFormInputsValue =
  | {
      url: string
      size: number
      height: number
      filename: string
    }
  | string
  | number
  | null