import { borderStyles } from '@adalo/constants'
import { IApp, IObject } from 'interfaces'
import { ViewStyle } from 'react-native'
import { getShadowStyles } from 'utils/styles'
import { normalizeFontFamily } from 'utils/type'

export type TableTheme = {
  tableContainer: {
    backgroundColor: string
    borderRadius: number
    borderStyle: ViewStyle['borderStyle']
    borderWidth: number
    borderColor: string
    shadow?: ReturnType<typeof getShadowStyles>
  }
  tableContainerInner: {
    borderRadius: number
  }
  header: {
    borderBottomWidth: number
    borderBottomColor: string
  }
  headerBackground: {
    borderTopLeftRadius: number
    borderTopRightRadius: number
    backgroundColor: string
  }
  headerText: {
    color: string
    fontFamily: string
  }
  row: {
    borderBottomWidth: number
    borderBottomColor: string
  }
  rowHover: {
    backgroundColor: string
  }
  cellText: {
    color: string
    fontFamily: string
  }
}

// Reference https://www.30secondsofcode.org/css/s/nested-border-radius/
const getInnerBorderRadius = (
  borderRadius: number,
  borderWidth: number
): number => Math.max(0, borderRadius - borderWidth)

const getThemeProps = (object: IObject) => {
  const attributes = object.attributes ?? {}
  const {
    shadow = {
      enabled: false,
      color: 'rgba(0, 0, 0, 0.2)',
      x: 0,
      y: 2,
      size: 4,
    },
    borderPosition = 'center',
    borderRadius = 10,
    borderStyle = borderStyles.SOLID,
    borderWidth = 1,
    borderColor = '#BDBDBD',
    backgroundColor = '#FFFFFF',
    tableRowFontColor = '#424242',
    tableRowLineColor = '#424242',
    tableColumnFontColor = '#000000',
    tableColumnBackgroundColor = '#EEEEEE',
    tableColumnLineColor = '#BDBDBD',
    tableRowHoverBackgroundColor = '#F5F5F5',
    fontFamily = '@body',
  } = attributes

  return {
    shadow: getShadowStyles(shadow),
    borderPosition,
    borderRadius,
    borderStyle,
    borderWidth,
    borderColor,
    backgroundColor,
    tableRowFontColor,
    tableRowLineColor,
    tableColumnFontColor,
    tableColumnBackgroundColor,
    tableRowHoverBackgroundColor,
    tableColumnLineColor,
    fontFamily,
  }
}

export const makeTheme = (app: IApp, object: IObject): TableTheme => {
  const themeProps = getThemeProps(object)

  const fontFamily = normalizeFontFamily(themeProps.fontFamily, app.branding)

  return {
    tableContainer: {
      backgroundColor: themeProps.backgroundColor,
      borderRadius: themeProps.borderRadius,
      borderStyle: themeProps.borderStyle as ViewStyle['borderStyle'], // we handle `none` (an invalid value) below
      borderWidth: themeProps.borderWidth,
      borderColor: themeProps.borderColor,
      ...(themeProps.borderStyle === borderStyles.NONE && {
        borderStyle: undefined,
        borderWidth: 0,
      }),
      ...themeProps.shadow,
    },
    tableContainerInner: {
      borderRadius: getInnerBorderRadius(
        themeProps.borderRadius,
        themeProps.borderWidth
      ),
    },
    header: {
      borderBottomWidth: 1,
      borderBottomColor: themeProps.tableColumnLineColor,
    },
    headerBackground: {
      borderTopLeftRadius: getInnerBorderRadius(
        themeProps.borderRadius,
        themeProps.borderWidth
      ),
      borderTopRightRadius: getInnerBorderRadius(
        themeProps.borderRadius,
        themeProps.borderWidth
      ),
      backgroundColor: themeProps.tableColumnBackgroundColor,
    },
    headerText: {
      color: themeProps.tableColumnFontColor,
      fontFamily,
    },
    row: {
      borderBottomWidth: 1,
      borderBottomColor: themeProps.tableRowLineColor,
    },
    rowHover: {
      backgroundColor: themeProps.tableRowHoverBackgroundColor,
    },
    cellText: {
      color: themeProps.tableRowFontColor,
      fontFamily,
    },
  }
}