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

export const chatStyles = StyleSheet.create({
  container: {
    gap: 16,
    height: '100%',
    backgroundColor: Colors.WHITE
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  headerText: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontWeight: '700'
  },
  photoContainer: {
    alignItems: 'center',
    gap: 8
  },
  groupPhoto: {
    width: 80,
    height: 80,
    borderRadius: 40,
    alignItems: 'center',
    justifyContent: 'center'
  },
  photoText: {
    color: Colors.DARK_BLUE,
    fontSize: 12,
    fontWeight: '700'
  },
  input: {
    marginBottom: 12
  },
  userItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 12,
    backgroundColor: Colors.FILL_LIGHT,
    gap: 8,
    borderRadius: 8,
    marginBottom: 6
  },
  avatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY
  },
  userName: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'montserrat-700'
  },
  userSubtitle: {
    color: Colors.DARK_BLUE,
    fontSize: 14,
    fontFamily: 'montserrat-500'
  },
  userNM: {
    color: Colors.DARK_BLUE,
    fontSize: 14,
    fontFamily: 'montserrat-700',
    marginRight: 12
  },
  unselectedCircle: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY,
    justifyContent: 'center',
    alignItems: 'center'
  },
  selectedUsersList: {
    paddingTop: 12
  },
  selectedUserContainer: {
    position: 'relative',
    width: '100%',
    alignItems: 'center',
    paddingBottom: 12
  },
  userContainer: {},
  selectedAvatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    borderWidth: 1,
    borderColor: Colors.LIGHT_GRAY
  },
  removeIcon: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 1,
    borderColor: Colors.WHITE,
    backgroundColor: Colors.RED,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1
  },
  usersRow: {
    flex: 1,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8,
    marginBottom: 24
  },
  textError: {
    color: Colors.RED,
    fontSize: getFontSize(12),
    fontFamily: 'redhat-600',
    marginTop: 5
  },
  optionsContainer: {
    paddingHorizontal: 8,
    borderRadius: 8,
    backgroundColor: Colors.FILL_LIGHT
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBlockColor: Colors.WHITE
  },
  optionText: {
    fontSize: getFontSize(12),
    fontWeight: '600',
    color: Colors.DARK_BLUE
  },
  title: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontFamily: 'redhat-700',
    marginBottom: 5
  },
  cancelText: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(14),
    fontWeight: '700'
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 24,
    gap: 8
  },
  textContainer: {
    flex: 1
  },
  name: {
    fontSize: getFontSize(14),
    color: Colors.DARK_BLUE,
    fontFamily: 'montserrat-700'
  },
  newGroup: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8,
    height: 44
  },
  text: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    fontWeight: '700'
  }
});
