import {StyleSheet, Dimensions} from 'react-native';
import R from '../../../assets/R';

const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const HOUR_HEIGHT = 80;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: R.colors.white,
  },
  monthPickerContainer: {
    backgroundColor: R.colors.white,
    borderBottomWidth: 1,
    borderBottomColor: R.colors.gray,
    paddingVertical: 10,
  },
  monthPickerContent: {
    paddingHorizontal: 15,
  },
  monthItem: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    marginRight: 10,
    borderRadius: 20,
    backgroundColor: R.colors.gray,
  },
  dateInfoContainer: {
    paddingHorizontal: 15,
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent:'center',
    maxWidth:70,
    borderRightWidth:1,
    borderRightColor:R.colors.gray,
  },
  dayName: {
    fontSize: R.sizes.xs,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.black,
    marginBottom: 2,
  },
  dayNumber: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.black,
  },
  timeSlotsContainer: {
    flex: 1,
    backgroundColor: R.colors.white,
  },
  scrollContent: {
    paddingBottom: 50,
  },
  timelineContainer: {
    flexDirection: 'row',
    position: 'relative',
  },
  timeLabelsColumn: {
    minWidth: 70,
    borderRightWidth: 1,
    borderRightColor: R.colors.gray,
  },
  eventsColumn: {
    flex: 1,
    position: 'relative',
    minHeight: 24 * HOUR_HEIGHT,
  },
  timeSlot: {
    height: HOUR_HEIGHT,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: R.colors.gray,
  },
  gridLine: {
    height: HOUR_HEIGHT,
    borderBottomWidth: 1,
    borderBottomColor: R.colors.gray,
    width: '100%',
  },
  timeText: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.black,
  },
  eventCard: {
    borderRadius: 15,
    paddingLeft: 15,
    paddingTop: 10,
  },
  eventTitle: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.white,
    fontWeight: '400',
    marginBottom: 5,
  },
  eventSubtitle: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    fontWeight: '400',
    color: R.colors.white,
    marginBottom: 5,
  },
  dayNumberToday: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.white,
    fontWeight: '400',
    backgroundColor: R.colors.blue,
    borderRadius: 15,
    paddingHorizontal: 4,
    paddingVertical: 3,
  },
  eventTime: {
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontRegular,
    color: R.colors.white,
    fontWeight: '400',
  },
});

export default styles;