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

export const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 16,
    justifyContent: 'space-between',
    flex: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#0F3F4F',
    flexShrink: 1,
    marginRight: 10,
  },
  headerImage: {
    width: 30,
    height: 30,
    marginRight: 16,
    resizeMode: 'contain',
    borderRadius: 15,
    borderColor: '#B4C2C7',
    borderWidth: 0.5
  },
  contentText: {
    fontSize: 13,
    color: '#0F3F4F',
    textAlign: 'left',
    marginLeft: 10,
    flexShrink: 1,
    marginRight: 10,
  },
  textNew: {
    color: Colors.ORANGE,
    fontSize: 10,
    fontWeight: '800'
  },
  headerIcon: {
    transform: [{ rotate: '-90deg' }],
  },
  itemIcon: {
    width: 20,
    height: 20,
    marginLeft: 10,
    resizeMode: 'contain',
  },
  rotate: {
    transform: [{ rotate: '90deg' }]
  },
  content: {
    padding: 20,
    paddingBottom: 4,
    paddingRight: 10,
    backgroundColor: '#FAFAFA',
    borderRadius: 8,
    borderTopWidth: 1,
    borderColor: '#E5E5E5'
  },
  sectionContainer: {
    marginBottom: 12,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 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
  },
  info: {
    paddingHorizontal: 10,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    marginHorizontal: 2,
    paddingVertical: 10
  },
  buttonActive: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE,
    borderWidth: 1
  },
  buttonInactive: {
    backgroundColor: 'transparent',
    borderColor: 'rgba(15, 63, 79, 0.3)',
    borderWidth: 1
  },
  buttonText: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: getFontSize(12)
  },
  smallPhotoContainer: {
    marginLeft: 8,
    justifyContent: 'space-between'
  },
  morePhotosOverlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.45)',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    position: 'absolute',
    bottom: 0,
    left: 0
  },
  morePhotosText: {
    color: Colors.WHITE,
    fontSize: 22,
    fontWeight: 'bold'
  },
  listItem: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    paddingVertical: 16
  },
  listItemHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    marginBottom: 8
  },
  listItemTextContainer: {
    flex: 1,
    justifyContent: 'center'
  },
  listItemTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  listItemSubtitle: {
    fontSize: 12,
    color: '#808080',
    fontWeight: '500'
  },
  flagImg: {
    borderRadius: 18,
    overflow: 'hidden',
    marginRight: 8,
    width: 36,
    height: 36,
    resizeMode: 'cover',
    borderWidth: 1,
    borderColor: '#F4F4F4'
  },
  moreButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: Colors.DARK_BLUE,
    borderRadius: 15,
    paddingHorizontal: 12,
    paddingVertical: 8
  },
  moreText: {
    fontSize: 12,
    textAlign: 'center',
    color: Colors.DARK_BLUE,
    fontWeight: 'bold'
  },
  photoContainer: {
    flexDirection: 'row',
    marginTop: 8
  },
  imageEdit: {
    width: '100%',
    height: undefined,
    resizeMode: 'contain',
    borderRadius: 8,
    marginTop: 8
  },
  saveBtn: { justifyContent: 'flex-end', flex: 1, marginBottom: 24, marginTop: 16 },
  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
  },
  imageFooter: { paddingBottom: 50, paddingHorizontal: 16, gap: 16 },
  imageOwner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 8,
    alignSelf: 'center'
  },
  imageOwnerText: { color: Colors.DARK_BLUE, fontFamily: 'montserrat-700' }
});
