import heroVariables from '../global';

const HEADER_PADDING = heroVariables.SMALL_SIZE;
const HEADER_BUTTON_PADDING = heroVariables.SMALL_SIZE;
const HEADER_BUTTON_HEIGHT = 20.0 + HEADER_BUTTON_PADDING * 2.0;
const HEADER_TITLE_FONT_SIZE = heroVariables.HEADER_4;
const DAY_TEXT_FONT_SIZE = heroVariables.HEADER_4;
const DAY_TEXT_LINE_HEIGHT = heroVariables.HEADER_4;
const DAY_TEXT_COLOR = heroVariables.TEXT_COLOR;
const DAY_PADDING = heroVariables.SMALL_SIZE;
const DAY_HEIGHT = DAY_TEXT_LINE_HEIGHT + DAY_PADDING * 2.0;
const DAY_NAME_FONT_SIZE = heroVariables.HEADER_5;
const DAY_NAME_COLOR = heroVariables.MUTED_TEXT_COLOR;
const DAY_NAME_SUNDAY_COLOR = heroVariables.RED;
const SELECTED_DAY_BACKGROUND_COLOR = heroVariables.PRIMARY_COLOR;
const SELECTED_DAY_TEXT_COLOR = heroVariables.WHITE;
const BLURRED_DAY_TEXT_COLOR = heroVariables.MUTED_TEXT_COLOR;
const CURRENT_DAY_TEXT_COLOR = heroVariables.PRIMARY_COLOR;
const HIDDEN_DAY_BACKGROUND_COLOR = heroVariables.GREY_LIGHT_90;

const fontStyle = heroVariables.FONT_FAMILY !== undefined ? { fontFamily: heroVariables.FONT_FAMILY } : {};

const calendarStyles = {
  wrapper: {},
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: HEADER_PADDING,
  },
  headerButton: {
    justifyContent: 'center',
    height: HEADER_BUTTON_HEIGHT,
    minWidth: HEADER_BUTTON_HEIGHT,
    paddingHorizontal: HEADER_BUTTON_PADDING,
  },
  headerTitle: {
    fontSize: HEADER_TITLE_FONT_SIZE,
    fontWeight: '500',
    ...fontStyle,
  },
  monthView: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  day: {
    flexDirection: 'row',
    flexBasis: Math.floor(100.0 / 7.0).toString() + '%',
    justifyContent: 'center',
    alignItems: 'center',
    height: DAY_HEIGHT,
  },
  dayText: {
    lineHeight: DAY_TEXT_LINE_HEIGHT,
    fontSize: DAY_TEXT_FONT_SIZE,
    fontWeight: '400',
    color: DAY_TEXT_COLOR,
    ...fontStyle,
  },
  dayName: {
    fontSize: DAY_NAME_FONT_SIZE,
    fontWeight: '500',
    color: DAY_NAME_COLOR,
  },
  dayNameSunday: {
    color: DAY_NAME_SUNDAY_COLOR,
  },
  selectedDay: {
    position: 'absolute',
    width: DAY_HEIGHT,
    height: DAY_HEIGHT,
    backgroundColor: SELECTED_DAY_BACKGROUND_COLOR,
    borderRadius: DAY_HEIGHT / 2.0,
  },
  selectedDayText: {
    fontWeight: '500',
    color: SELECTED_DAY_TEXT_COLOR,
  },
  blurredDayText: {
    color: BLURRED_DAY_TEXT_COLOR,
  },
  currentDayText: {
    color: CURRENT_DAY_TEXT_COLOR,
  },
  markedDay: {
    position: 'absolute',
    bottom: DAY_PADDING / 2.0,
    flexDirection: 'row',
  },
  mark: {
    width: 4.0,
    height: 4.0,
    marginHorizontal: 1.0,
    borderRadius: 2.0,
  },
  hiddenDay: {
    backgroundColor: HIDDEN_DAY_BACKGROUND_COLOR,
  },
} as const;

export default calendarStyles;