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

export const styles = StyleSheet.create({
  listContainer: {
    paddingTop: 12,
    paddingBottom: 12
  },
  searchContainer: {
    marginBottom: 6
  },
  card: {
    borderRadius: 8,
    marginBottom: 16,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10
  },
  imageWrapper: {
    position: 'relative'
  },
  image: {
    width: 86,
    height: '100%',
    minHeight: 86,
    borderRadius: 8
  },
  iconOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 20,
    height: 20,
    backgroundColor: Colors.ORANGE,
    borderTopLeftRadius: 8,
    borderBottomRightRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  joinedOverlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    height: 20,
    paddingHorizontal: 6,
    backgroundColor: Colors.ORANGE,
    borderTopRightRadius: 8,
    borderBottomRightRadius: 8,
    borderBottomLeftRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  info: {
    flex: 1,
    paddingVertical: 5,
    gap: 5
  },
  title: {
    fontSize: getFontSize(16),
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE
  },
  dateAndLocation: {
    fontSize: getFontSize(12),
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    flex: 1
  },
  spots: {
    fontSize: 14,
    color: '#FF5E00',
    marginTop: 2
  },
  statusBadge: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.DARK_BLUE,
    borderTopRightRadius: 8,
    borderBottomRightRadius: 8,
    width: 23,
    height: '100%'
  },
  fullBadge: {
    backgroundColor: Colors.DARK_BLUE
  },
  tourBadge: {
    backgroundColor: Colors.ORANGE
  },
  rotatedContainer: {
    transform: [{ rotate: '-90deg' }],
    justifyContent: 'center',
    alignItems: 'center',
    height: 23,
    width: 80
  },
  statusText: {
    color: Colors.WHITE,
    fontSize: getFontSize(16),
    fontFamily: 'montserrat-700',
    textAlign: 'center'
  },
  row: { flexDirection: 'row', gap: 6, alignItems: 'center' },
  sectionContainer: {
    marginTop: 12,
    marginBottom: 12,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    paddingHorizontal: 8
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  chevronContainer: {
    width: 18,
    height: 18,
    alignItems: 'center'
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
    justifyContent: 'space-between',
    flex: 1
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 4,
    justifyContent: 'space-between',
    flex: 1
  },
  headerText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE,
    flexShrink: 1
  },
  headerIcon: {
    transform: [{ rotate: '-90deg' }]
  },
  rotate: {
    transform: [{ rotate: '90deg' }]
  },
  tabBar: {
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0,
    marginTop: 0,
    height: 48
  },
  tabLabel: {
    color: 'grey',
    fontSize: getFontSize(14),
    fontWeight: '700',
    padding: 8,
    width: Dimensions.get('window').width / 3,
    textAlign: 'center',
    flexWrap: 'wrap'
  },
  tabStyle: {
    padding: 0,
    marginHorizontal: 2
  }
});

export const popupStyles = StyleSheet.create({
  popup: {
    position: 'absolute',
    backgroundColor: Colors.WHITE,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
    zIndex: 1000,
    minWidth: 150,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY
  },
  popupOption: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.FILL_LIGHT
  },
  popupOptionLast: {
    borderBottomWidth: 0
  },
  popupText: {
    fontSize: getFontSize(14),
    color: Colors.DARK_BLUE,
    fontFamily: 'redhat-600'
  }
});
