import {StyleSheet} from 'react-native';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

const MIN_CELL_HEIGHT = 60;
const HEADER_MIN_HEIGHT = 56;
const COLUMN_MAX_WIDTH = 146;
const ROW_LABEL_WIDTH = 185;

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  columnsContainer: {flex: 1},
  scrollContent: {paddingRight: SPACING.x3},
  rowHeaderGroup: {
    flexShrink: 0,
    width: ROW_LABEL_WIDTH,
  },
  cornerCell: {
    borderTopLeftRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    minHeight: HEADER_MIN_HEIGHT,
  },
  rowHeaderCell: {
    borderTopWidth: 0,
    borderWidth: 1,
    justifyContent: 'center',
    minHeight: MIN_CELL_HEIGHT,
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x1.5'],
  },
  rowHeaderCellLast: {borderBottomLeftRadius: BORDER_RADIUS.l},
  column: {maxWidth: COLUMN_MAX_WIDTH},
  columnHeaderCell: {
    borderBottomWidth: 1,
    borderTopWidth: 1,
    justifyContent: 'center',
  },
  columnHeaderCellLast: {borderTopRightRadius: BORDER_RADIUS.l},
  columnHeaderContent: {
    alignItems: 'center',
    alignSelf: 'stretch',
    minHeight: HEADER_MIN_HEIGHT,
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x1.5'],
  },
  cell: {
    alignItems: 'center',
    borderBottomWidth: 1,
    justifyContent: 'center',
    minHeight: MIN_CELL_HEIGHT,
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x1.5'],
  },
  bottomRightCell: {borderBottomRightRadius: BORDER_RADIUS.l},
  lastColumnBorder: {borderRightWidth: 1},
});
