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

export const styles = StyleSheet.create({
  popupContainer: {
    position: 'absolute',
    bottom: 22,
    left: 0,
    right: 0,
    backgroundColor: Colors.WHITE,
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: '5%',
    shadowColor: 'rgba(33, 37, 41, 0.12)',
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 8,
    elevation: 5,
    zIndex: 2
  },
  regionInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: '100%'
  },
  regionImage: {
    width: 60,
    height: 60,
    borderRadius: 6,
    marginRight: 10
  },
  regionTextContainer: {
    justifyContent: 'center',
    flex: 1
  },
  regionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  regionSubtitle: {
    fontSize: 13,
    color: Colors.TEXT_GRAY
  },
  separator: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.DARK_LIGHT,
    width: '100%',
    marginVertical: 16
  },
  bottomContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%'
  },
  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 6,
    gap: 8
  },
  userImageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10
  },
  userImage: {
    width: 28,
    height: 28,
    borderRadius: 14,
    marginLeft: -6,
    borderWidth: 1,
    borderColor: Colors.DARK_LIGHT,
    resizeMode: 'cover'
  },
  userCountContainer: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: Colors.DARK_LIGHT,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: -6
  },
  userCount: {
    fontSize: 12,
    color: Colors.DARK_BLUE,
    lineHeight: 24
  },
  markVisitedButton: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  markVisitedText: {
    fontSize: 12,
    color: Colors.WHITE,
    fontWeight: '700',
    letterSpacing: 0.01,
    lineHeight: 16
  },
  infoContent: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  visitedButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13,
    lineHeight: 16
  },
  btnContainer: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
    gap: 8,
    flex: 1
  },
  btn: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 6,
    alignItems: 'center',
    borderWidth: 1
  },
  visitedButton: {
    backgroundColor: 'transparent',
    borderColor: Colors.BORDER_LIGHT
  },
  markVisitedButtonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 13,
    lineHeight: 16
  },
  visitedContainer: { gap: 6, flexDirection: 'row', alignItems: 'center' },
  editBtn: {
    borderRadius: 20,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 7
  },
  durationContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 8,
    marginLeft: -6
  },
  durationItem: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4
  },
  durationIconActive: {
    backgroundColor: Colors.WHITE
  },
  durationIconInactive: {
    backgroundColor: Colors.LIGHT_GRAY
  },
  visitDuration: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: getFontSize(10)
  },
  slowText: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  infoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8
  },
  infoText: {
    fontWeight: '600',
    fontSize: 12,
    color: Colors.DARK_BLUE,
    flexShrink: 1
  },
  editRegionBtn: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});
