import React from 'react'

import EmptyState from '../EmptyState/EmptyState'
import { useMediaQuery } from '../../hooks/responsiveHooks'
import DesktopTable from './Desktop/DesktopTable'
import MobileTable from './Mobile/MobileTable'
import type { ConfigItemType, StandardTableProps } from './StandardTable.models'
import styles from './_table.module.scss'
import TableHeader from './TableHeader/TableHeader'
import { getTotalOptionsDefaultValue } from './helperCheckboxFunctions'

const StandardTable = <
  DataItem,
  ConfigItem extends ConfigItemType<DataItem, Record<string, unknown>>,
  FilterOption,
>(
  props: StandardTableProps<DataItem, ConfigItem, FilterOption>,
): React.JSX.Element => {
  const {
    hasData,
    loading,
    tableId,
    noDataFields,
    largeMobileBreakpoint,
    noMobileView,
    tableHeaderProps,
    qaTestId = 'standard-table',
  } = props
  const localStorageName = `sort_by_${tableId}`
  const isMobileView = useMediaQuery({
    type: 'max',
    breakpoint: largeMobileBreakpoint ? 'lg' : 'md',
  })

  return (
    <div id={`standard_table_${tableId}_container`} qa-test-id={qaTestId}>
      {tableHeaderProps ? (
        <div className={styles.tableHeaderContainer}>
          <TableHeader {...tableHeaderProps} />
        </div>
      ) : null}
      {!isMobileView || noMobileView ? (
        // @ts-expect-error Having an issue with the totalRowKey generic. For now, we will expect this error until we figure out how to deal with this error.
        <DesktopTable
          totalCheckboxOptions={getTotalOptionsDefaultValue(
            tableHeaderProps?.header?.value,
            props?.totalCheckboxOptions,
          )}
          {...props}
          localStorageName={localStorageName}
        />
      ) : (
        // @ts-expect-error Having an issue with the DataItem generic. For now, we will expect this error until we figure out how to deal with this error.
        <MobileTable
          totalCheckboxOptions={getTotalOptionsDefaultValue(
            tableHeaderProps?.header?.value,
            props?.totalCheckboxOptions,
          )}
          {...props}
          localStorageName={localStorageName}
        />
      )}
      {!loading && !hasData ? <EmptyState {...noDataFields} /> : null}
    </div>
  )
}

export default StandardTable

// COMMON TABLE PROPS
export const color = {
  red: styles.redFont,
  gray: styles.darkPurpleFont,
  yellow: styles.darkYellowFont,
  green: styles.darkGreenFont,
  blue: styles.chartStandardBlueFont,
}

export const backgroundColor = {
  red: styles.lightRedBackground,
  gray: styles.lighterGrayBackground,
  yellow: styles.lightYellowBackground,
  green: styles.lightGreenBackground,
  blue: styles.mediumBlueBackground,
}