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

export const styles = StyleSheet.create({
  regionItem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 8,
    backgroundColor: Colors.FILL_LIGHT
  },
  regionItemTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  regionHeader: { flexDirection: 'row', alignItems: 'center', flex: 1 },
  flagStyle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY,
    marginRight: 12
  },
  nameContainer: {
    flexShrink: 1
  },
  regionName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: Colors.DARK_BLUE
  },
  regionSubname: {
    fontSize: 12,
    fontWeight: '400',
    color: Colors.DARK_BLUE
  },
  regionItemBottom: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16
  },
  qualityOfVisit: {
    fontSize: 12,
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    marginBottom: 8
  },
  markCompletedButton: {
    backgroundColor: Colors.ORANGE,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 6,
    flex: 1,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: Colors.ORANGE
  },
  markNotCompletedButton: {
    backgroundColor: 'transparent',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 6,
    alignItems: 'center',
    borderColor: Colors.BORDER_LIGHT,
    borderWidth: 1,
    flex: 1
  },
  markCompletedButtonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 13
  },
  markNotCompletedButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13
  },
  trashBtn: {
    backgroundColor: Colors.RED,
    padding: 8,
    borderRadius: 50
  },
  qualitySelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    backgroundColor: Colors.DARK_LIGHT,
    justifyContent: 'space-between',
    flex: 1
  },
  qualityButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: 13
  },
  divider: { height: 1, backgroundColor: Colors.DARK_LIGHT, marginVertical: 16 },
  completedContainer: { gap: 8, flexDirection: 'row', alignItems: 'center' },
  regionDatesContainer: {
    paddingBottom: 12
  },
  regionDatesLabel: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    marginBottom: 8,
    fontWeight: '600'
  },
  dateRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 12
  },
  dateColumn: {
    flex: 1,
    gap: 8
  },
  dateFieldLabel: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    fontWeight: '600'
  },
  dateInput: {
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 6,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: Colors.DARK_LIGHT,
    height: 36
  },
  dateText: {
    fontSize: getFontSize(13),
    color: Colors.DARK_BLUE,
    fontWeight: '600'
  },
  placeholderText: {
    color: Colors.TEXT_GRAY,
    flexWrap: 'wrap'
  }
});