import { StyleSheet } from 'react-native'
import appColors from '../../../theme/appColors'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import appFonts from '../../../theme/appFonts'

const styles = StyleSheet.create({
  mapSection: {
    flex: 0.85,
    backgroundColor: appColors.primaryLight,
  },
  extraSection: {
    flex: 0.1,
  },
  greenSection: {
    // position: 'absolute',
    bottom: windowHeight(2),
    width: '100%',
    height: windowHeight(22),
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  additionalSection: {
    marginVertical: windowHeight(2),
    height: windowHeight(10.5),
    marginHorizontal: windowWidth(4),
    borderRadius: windowWidth(5),
    borderWidth: windowHeight(0.2),
  },
  backButton: {
    position: 'absolute',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  map: {
    flex: 1,
  },
  hourly_package_view: { alignItems: 'center', justifyContent: 'center' },
  hourly_package_main_view: {
    width: 1,
    height: '50%',
    backgroundColor: appColors.categoryTitle,
    marginVertical: 13,
  },
  usedTextView: {
    justifyContent: 'space-evenly',
    borderRadius: 9,
    height: 50,
    width: '45%',
    marginHorizontal: 8,
  },
  totalView: {
    width: 1,
    height: '50%',
    backgroundColor: appColors.categoryTitle,
    marginVertical: 13,
  },
  vehicle_map_icon: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  loading: { width: 100, height: 100 },
  rideDataMainView: {
    justifyContent: 'space-evenly',
    height: 50,
    width: '100%',
    position: 'absolute',
    top: 60,
  },
  rideDataView: {
    justifyContent: 'space-around',
    borderRadius: 9,
    height: 50,
    width: '45%',
    marginHorizontal: 8,
  },
  bottomSheetlayer: {
    flex: 1,
    height: windowHeight(80),
    marginTop: windowHeight(2),
  },
  fab: {
    position: 'absolute',
    right: windowWidth(2),
    bottom: '42%',
    borderRadius: windowHeight(10),
    zIndex: 10,
  },
  fabMini: {
    position: 'absolute',
    right: windowWidth(2),
    backgroundColor: 'white',
    borderRadius: windowHeight(10),
    zIndex: 11,
    alignSelf: 'center',
    justifyContent: 'center',
  },
  extraFareSheetContainer: {
    borderWidth: windowWidth(0.45),
    marginHorizontal: windowWidth(5),
    marginVertical: windowHeight(3),
    borderRadius: windowWidth(5),
    paddingHorizontal: windowWidth(4),
    paddingVertical: windowHeight(2),
  },
  extraFareTitle: {
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT4HALF,
    marginBottom: windowHeight(2.2),
  },
  inputContainer: {
    marginVertical: windowHeight(0.1),
  },
  inputLabel: {
    fontFamily: appFonts.medium,
    fontSize: fontSizes.FONT3HALF1,
  },
  actionButtons: {
    marginHorizontal: windowWidth(3),
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: windowHeight(3),
  },
  chargesList: {
    width: '110%',
    height: windowHeight(0.6),
    alignSelf: 'center',
    marginBottom: windowHeight(2),
    marginTop: windowHeight(1),
  },
  chargeItem: {
    alignItems: 'center',
  },
  chargesList1: {
    height: windowHeight(0.25),
    marginVertical: windowHeight(1.2),
  },
  chargeAmount: {
    marginHorizontal: windowWidth(2),
  },
})
export default styles
