import { StyleSheet, Platform } from 'react-native';
import * as defaultStyle from '../style';
import { Theme } from '../types';
import constants from '../commons/constants';

export const HEADER_HEIGHT = 70;
export const KNOB_CONTAINER_HEIGHT = 12;

export default function styleConstructor(theme: Theme = {}) {
  const appStyle = { ...defaultStyle, ...theme };

  return StyleSheet.create({
    containerShadow: {
      backgroundColor: appStyle.calendarBackground,
      ...Platform.select({
        ios: {
          shadowColor: '#858F96',
          shadowOpacity: 0.25,
          shadowRadius: 10,
          shadowOffset: { height: 2, width: 0 },
          zIndex: 99,
        },
        android: {
          elevation: 3,
        },
      }),
    },
    containerWrapper: {
      paddingBottom: 6,
    },
    container: {
      backgroundColor: appStyle.calendarBackground,
    },
    knobContainer: {
      position: 'absolute',
      left: 0,
      right: 0,
      height: KNOB_CONTAINER_HEIGHT,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: appStyle.calendarBackground,
    },
    knob: {
      width: 40,
      height: 4,
      borderRadius: 3,
      backgroundColor: appStyle.expandableKnobColor,
    },
    sectionText: {
      fontWeight: 'bold',
      fontSize: 12,
      lineHeight: 16,
      color: '#7a92a5',
      paddingTop: 24, // 8
      paddingBottom: 8,
      paddingLeft: 20,
      paddingRight: 20,
      backgroundColor: appStyle.calendarBackground,
      textAlign: 'left',
      textTransform: 'uppercase',
    },
    header: {
      position: 'absolute',
      left: 0,
      right: 0,
      backgroundColor: appStyle.calendarBackground,
    },
    headerTitle: {
      alignSelf: 'center',
      paddingTop: 13,
      paddingBottom: 18,
      fontSize: appStyle.textMonthFontSize,
      fontFamily: appStyle.textMonthFontFamily,
      fontWeight: appStyle.textMonthFontWeight,
      color: appStyle.monthTextColor,
    },
    weekDayNames: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    dayHeader: {
      width: 40,
      textAlign: 'center',
      fontSize: appStyle.textDayHeaderFontSize,
      fontFamily: appStyle.textDayHeaderFontFamily,
      fontWeight: appStyle.textDayHeaderFontWeight,
      color: appStyle.textSectionTitleColor,
    },
    monthView: {
      backgroundColor: appStyle.calendarBackground,
    },
    weekContainer: {
      position: 'absolute',
      left: 0,
      right: 0,
      height: (appStyle.headerHeight ?? 42) + 4,
      paddingTop: 1,
      top:
        HEADER_HEIGHT +
        (constants.isAndroid ? 10 : 8) -
        (appStyle.hideHeader ? appStyle.headerHeight ?? 44 : 0), // align row on top of calendar's first row
      backgroundColor: appStyle.calendarBackground,
    },
    hidden: {
      opacity: 0,
    },
    visible: {
      opacity: 1,
    },
    weekCalendar: {
      marginTop: 12,
      marginBottom: -2,
    },
    week: {
      paddingRight: 14,
      paddingLeft: 14,
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    partialWeek: {
      paddingRight: 0,
    },
    dayContainer: {
      alignItems: 'center',
      flex: 1,
      justifyContent: 'center',
    },
    emptyDayContainer: {
      flex: 1,
    },
    arrowImage: {
      tintColor: appStyle.arrowColor,
      transform: constants.isRTL ? [{ scaleX: -1 }] : undefined,
    },
    contextWrapper: {
      flex: 1,
    },
    todayButtonContainer: {
      alignItems:
        appStyle.todayButtonPosition === 'right' ? 'flex-end' : 'flex-start',
      position: 'absolute',
      left: 20,
      right: 20,
      bottom: 0,
    },
    todayButton: {
      height: constants.isTablet ? 40 : 28,
      paddingHorizontal: constants.isTablet ? 20 : 12,
      borderRadius: constants.isTablet ? 20 : 14,
      flexDirection:
        appStyle.todayButtonPosition === 'right' ? 'row-reverse' : 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white',
      ...Platform.select({
        ios: {
          shadowColor: '#79838A',
          shadowOpacity: 0.3,
          shadowRadius: 14,
          shadowOffset: { height: 6, width: 0 },
        },
        android: {
          elevation: 6,
        },
      }),
    },
    todayButtonText: {
      color: appStyle.todayButtonTextColor,
      fontSize: constants.isTablet
        ? appStyle.todayButtonFontSize + 2
        : appStyle.todayButtonFontSize,
      fontWeight: appStyle.todayButtonFontWeight,
      fontFamily: appStyle.todayButtonFontFamily,
    },
    todayButtonImage: {
      tintColor: appStyle.todayButtonTextColor,
      marginLeft: appStyle.todayButtonPosition === 'right' ? 7 : undefined,
      marginRight: appStyle.todayButtonPosition === 'right' ? undefined : 7,
    },
    ...(theme?.stylesheet?.expandable?.main || {}),
  });
}