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

export const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0,
    marginTop: 0,
    height: 42
  },
  tabLabel: {
    color: 'grey',
    fontSize: getFontSize(14),
    fontWeight: '700',
    padding: 8,
    width: Dimensions.get('window').width / 2,
    textAlign: 'center'
  },
  tabStyle: {
    padding: 0,
    marginHorizontal: 2
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  modalContainer: {
    backgroundColor: 'white',
    borderRadius: 15,
    paddingHorizontal: 16,
    gap: 12,
    paddingTop: 12
  },
  dropdownWrapper: { gap: 4, flex: 1 },
  textSmall: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: 12
  },
  rowWrapper: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 16
  },
  optionsContainer: {
    gap: 16,
    marginBottom: 16
  },
  closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
  sceneContainer: {
    flexGrow: 1,
    justifyContent: 'space-between'
  },
  row: { flexDirection: 'row', alignItems: 'center' },
  textBold: { fontSize: 12, fontWeight: '700', color: Colors.DARK_BLUE },
  multiOption: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center'
  },
  optionText: { fontSize: 16, color: Colors.DARK_BLUE, flex: 1 },
  alignStyle: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  buttonWrapper: {
    width: '100%',
    height: 48
  },
  buttonLabel: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(12),
    fontWeight: '700',
    marginLeft: 15
  },
  textContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
    justifyContent: 'space-between'
  },
  textWithIcon: { lineHeight: 26, fontSize: 12, color: Colors.DARK_BLUE, fontStyle: 'italic' },
  text: { fontSize: 12, color: Colors.DARK_BLUE, fontStyle: 'italic' },
  boldText: { fontWeight: '700' },
  bulletItem: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%'
  },
  bulletIcon: {
    fontSize: 12,
    fontWeight: '700',
    marginHorizontal: 6,
    alignSelf: 'flex-start'
  },
  icon: {
    backgroundColor: Colors.WHITE,
    width: 26,
    height: 26,
    borderRadius: 13,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
    shadowOpacity: 1,
    elevation: 8
  },
  megaSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 6,
    backgroundColor: Colors.FILL_LIGHT,
    justifyContent: 'space-between',
    marginTop: 12,
    marginBottom: 8
  },
  megaButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13
  },
  divider: {
    height: 1,
    width: '100%',
    marginVertical: 12,
    backgroundColor: Colors.DARK_LIGHT
  },
  seriesSheetContainer: {
    flex: 1
  },
  seriesHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8
  },
  seriesSelectedCount: {
    fontSize: 12,
    color: Colors.TEXT_GRAY,
    fontWeight: '500'
  },
  seriesActions: {
    flexDirection: 'row',
    gap: 8,
  },
  seriesActionBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.WHITE,
    borderWidth: 1,
    borderColor: Colors.DARK_BLUE,
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 6,
    gap: 6
  },
  seriesActionBtnText: {
    color: Colors.DARK_BLUE,
    fontSize: 12,
    fontWeight: '600'
  },
  seriesPillsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    paddingHorizontal: 16,
    paddingBottom: 24
  },
  seriesPill: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 24,
    gap: 6,
    maxWidth: '100%'
  },
  seriesPillSelected: {
    backgroundColor: Colors.ORANGE,
    borderWidth: 1,
    borderColor: Colors.ORANGE
  },
  seriesPillUnselected: {
    backgroundColor: Colors.WHITE,
    borderWidth: 1,
    borderColor: Colors.DARK_BLUE
  },
  seriesPillText: {
    fontSize: 14,
    fontWeight: '600',
    flexShrink: 1
  },
  seriesPillTextSelected: {
    color: Colors.WHITE
  },
  seriesPillTextUnselected: {
    color: Colors.DARK_BLUE
  },
  sheetBackground: {
    backgroundColor: Colors.WHITE,
    borderRadius: 16
  },
  sheetHandle: {
    backgroundColor: '#D1D1D6',
    width: 40
  },
  seriesCloseBtn: {
    alignSelf: 'flex-end',
    paddingHorizontal: 16,
    paddingVertical: 4
  },
  regionsCloseBtn: {
    alignSelf: 'flex-end',
    paddingBottom: 18,
    paddingTop: 4
  }
});
