import { IApp, IObject } from 'interfaces'
import { makeTheme } from './theme'

const fakeApp: IApp = {
  id: '14f4fe72-191c-469b-9e21-40c93d126484',
  name: 'An exercise in branding...',
  path: null,
  DomainId: null,
  shortURL: '',
  libraries: [],
  branding: {
    text: '#424242',
    fonts: {
      body: {
        family: 'Old Standard TT',
        category: 'serif',
        variants: ['regular', '700'],
      },
      heading: {
        family: 'Libre Baskerville',
        category: 'serif',
        variants: ['200', '300', 'regular', '500', '600', '700'],
      },
    },
    primary: '#00A898',
    secondary: '#fca2f7',
    background: '#FFFFFF',
  },
}

describe('Table theme', () => {
  it('should return a suitable default theme', () => {
    expect(makeTheme(fakeApp, {} as IObject)).toEqual({
      tableContainer: {
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#BDBDBD',
      },
      tableContainerInner: {
        borderRadius: 9,
      },
      header: {
        borderBottomWidth: 1,
        borderBottomColor: '#BDBDBD',
      },
      headerBackground: {
        borderTopLeftRadius: 9,
        borderTopRightRadius: 9,
        backgroundColor: '#EEEEEE',
      },
      headerText: {
        color: '#000000',
        fontFamily: 'Old Standard TT',
      },
      row: {
        borderBottomWidth: 1,
        borderBottomColor: '#424242',
      },
      rowHover: {
        backgroundColor: '#F5F5F5',
      },
      cellText: {
        color: '#424242',
        fontFamily: 'Old Standard TT',
      },
    })
  })

  it('should return a suitable theme with custom props', () => {
    const object = {
      attributes: {
        shadow: {
          enabled: true,
          color: 'rgba(0, 0, 0, 0.2)',
          x: 0,
          y: 2,
          size: 4,
        },
        borderPosition: 'center',
        borderRadius: 4,
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#BDBDBD',
        backgroundColor: '#FFFFFF',
        tableRowFontColor: '#424242',
        tableRowLineColor: '#424242',
        tableColumnFontColor: '#000000',
        tableColumnBackgroundColor: '#EEEEEE',
        tableRowHoverBackgroundColor: '#F5F5F5',
        // more attributes...
      },
      // more properties...
    } as IObject

    expect(makeTheme(fakeApp, object)).toEqual({
      tableContainer: {
        backgroundColor: '#FFFFFF',
        borderRadius: 4,
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#BDBDBD',
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 1,
        shadowRadius: 4,
      },
      tableContainerInner: {
        borderRadius: 3,
      },
      header: {
        borderBottomWidth: 1,
        borderBottomColor: '#BDBDBD',
      },
      headerBackground: {
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
        backgroundColor: '#EEEEEE',
      },
      headerText: {
        color: '#000000',
        fontFamily: 'Old Standard TT',
      },
      row: {
        borderBottomWidth: 1,
        borderBottomColor: '#424242',
      },
      rowHover: {
        backgroundColor: '#F5F5F5',
      },
      cellText: {
        color: '#424242',
        fontFamily: 'Old Standard TT',
      },
    })
  })

  it('should return a suitable theme with custom props, no border', () => {
    const object = {
      attributes: {
        shadow: {
          enabled: true,
          color: 'rgba(0, 0, 0, 0.2)',
          x: 0,
          y: 2,
          size: 4,
        },
        borderPosition: 'center',
        borderRadius: 4,
        borderStyle: 'none',
        borderWidth: 1,
        borderColor: '#BDBDBD',
        backgroundColor: '#FFFFFF',
        tableRowFontColor: '#424242',
        tableRowLineColor: '#424242',
        tableColumnFontColor: '#000000',
        tableColumnBackgroundColor: '#EEEEEE',
        tableRowHoverBackgroundColor: '#F5F5F5',
        // more attributes...
      },
      // more properties...
    } as IObject

    expect(makeTheme(fakeApp, object)).toEqual({
      tableContainer: {
        backgroundColor: '#FFFFFF',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#BDBDBD',
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 1,
        shadowRadius: 4,
      },
      tableContainerInner: {
        borderRadius: 3,
      },
      header: {
        borderBottomWidth: 1,
        borderBottomColor: '#BDBDBD',
      },
      headerBackground: {
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
        backgroundColor: '#EEEEEE',
      },
      headerText: {
        color: '#000000',
        fontFamily: 'Old Standard TT',
      },
      row: {
        borderBottomWidth: 1,
        borderBottomColor: '#424242',
      },
      rowHover: {
        backgroundColor: '#F5F5F5',
      },
      cellText: {
        color: '#424242',
        fontFamily: 'Old Standard TT',
      },
    })
  })
})