import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: width * 0.04,
  },
  scrollview: {
    paddingBottom: width * 0.1,
  },
  spacing: {
    marginVertical: width * 0.02,
  },
  spacingVertical: {
    marginHorizontal: width * 0.03,
  },
  is24HoursSection: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
    paddingBottom: width * 0.06,
    paddingHorizontal: width * 0.05,
  },
  checkboxSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  checkbox: isChecked => ({
    width: width * 0.055,
    height: width * 0.055,
    borderWidth: 1,
    borderColor: isChecked ? Colors.PRIMARY : Colors.GREY,
    backgroundColor: isChecked ? Colors.PRIMARY : Colors.WHITE,
    borderRadius: width * 0.01,
    alignItems: 'center',
    justifyContent: 'center',
  }),
  checkboxIcon: {
    fontSize: RFValue(15),
    color: Colors.WHITE,
  },
  checkboxLabel: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12),
    color: Colors.TEXT,
    marginLeft: width * 0.03,
  },
  is24Hours: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: width * 0.04,
  },
  is24HoursLabel: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(12),
    color: Colors.TEXT,
    marginRight: width * 0.04,
  },
  inputHourSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  inputHours: {
    width: width * 0.2,
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
  },
  inputHourLabel: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(11.5),
    color: Colors.TEXT,
  },
  inputHourItem: {
    marginVertical: width * 0.02,
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12),
    color: Colors.TEXT,
  },

  // day item
  dayItemSection: is24Hours => ({
    flexDirection: 'row',
    paddingLeft: width * 0.05,
    marginTop: width * 0.05,
    opacity: is24Hours ? 0.5 : 1,
  }),
  dayItemImage: {
    width: width * 0.1,
    height: width * 0.1,
  },
  dayItemInfoSection: {
    flex: 1,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: Colors.LINE_STROKE,
    marginLeft: width * 0.04,
    paddingRight: width * 0.05,
    paddingBottom: width * 0.05,
  },
  dayItemInfo: {
    flex: 1,
    justifyContent: 'center',
  },
  dayItemInfoTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(12.5),
    color: Colors.TEXT,
  },
  dayItemInfoSubTitlte: isClosed => ({
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(11),
    color: isClosed ? Colors.PRIMARY : Colors.TEXT,
    marginTop: width * 0.008,
  }),
  dayItemInfoChangeButtonTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(11),
    color: Colors.PRIMARY,
  },

  buttonSection: {
    paddingHorizontal: width * 0.05,
  },
});
