import { StyleSheet } from 'react-native';
import { Colors } from 'src/theme';
import { getFontSize } from 'src/utils';

export const styles = StyleSheet.create({
  tabContainer: { flexDirection: 'row', gap: 16, alignItems: 'center', marginBottom: 8 },
  tabStyle: {
    flex: 1,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    gap: 4,
    borderWidth: 1
  },
  deleteTab: {
    backgroundColor: 'transparent',
    borderColor: Colors.RED
  },
  tabText: {
    fontSize: getFontSize(14),
    fontWeight: 'bold',
    fontFamily: 'redhat-700'
  },
  deleteTabText: {
    color: Colors.RED
  },
  addNewTab: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  addNewTabText: { color: Colors.WHITE },
  regionSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    borderRadius: 4,
    height: 36,
    backgroundColor: Colors.FILL_LIGHT,
    justifyContent: 'flex-start',
    gap: 10
  },
  regionText: {
    fontSize: 15,
    color: Colors.LIGHT_GRAY
  },
  regionsLabel: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700',
    marginBottom: 5
  },
  noRegiosText: {
    fontSize: 14,
    fontWeight: '500',
    color: Colors.LIGHT_GRAY,
    textAlign: 'center',
    paddingVertical: 8
  },
  addRegionBtn: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    gap: 10,
    borderColor: Colors.DARK_BLUE,
    borderWidth: 1,
    borderStyle: 'solid',
    backgroundColor: Colors.WHITE,
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  addRegionBtntext: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700'
  },
  regionsContainer: {
    gap: 12
  },
  btnOption: {
    paddingHorizontal: 16,
    paddingVertical: 9,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16
  },
  btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
  wrapper: {
    backgroundColor: Colors.WHITE,
    padding: 16,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    height: 'auto'
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  regionItemContainer: {
    backgroundColor: Colors.WHITE,
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    borderWidth: 0.5,
    borderColor: Colors.LIGHT_GRAY
  },
  regionDatesContainer: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: Colors.LIGHT_GRAY
  },
  regionDatesLabel: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    marginBottom: 8,
    fontWeight: '600'
  },
  dateRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 12
  },
  dateColumn: {
    flex: 1
  },
  dateFieldLabel: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    marginBottom: 4,
    fontWeight: '600'
  },
  dateInput: {
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 6,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: Colors.FILL_LIGHT,
    height: 36
  },
  dateText: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    fontWeight: '500'
  },
  placeholderText: {
    color: Colors.TEXT_GRAY,
    flexWrap: 'wrap'
  },
  datePickerHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },

  datePickerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: Colors.DARK_BLUE
  },
  datePickerCancel: {
    fontSize: 16,
    color: '#666'
  },
  datePickerConfirm: {
    fontSize: 16,
    color: Colors.DARK_BLUE,
    fontWeight: '600'
  },
  wheelContainer: {
    flexDirection: 'row',
    paddingHorizontal: 14,
    paddingTop: 16,
    paddingBottom: 24
  },
  wheelColumn: {
    flex: 1,
    alignItems: 'center'
  },
  wheelLabel: {
    fontSize: 14,
    color: Colors.DARK_BLUE,
    marginBottom: 8,
    fontWeight: '600'
  },
  wheelPicker: {
    height: 210,
    width: '100%',
    backgroundColor: 'white'
  }
});
