import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';

export const styles = StyleSheet.create({
  component: {
    width: '100%',
    height: '100%',
  },
  profile: {
    width: '100%',
    height: '100%',
    display: 'flex',
  },
  navHeader: {
    height: 72,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 16,
    paddingLeft: 8,
    paddingRight: 8,
  },
  field: {
    position: 'relative',
  },
  smLabel: {
    fontSize: 24,
    minWidth: 0,
    flexShrink: 1,
    color: 'white',
    fontWeight: 600,
  },
  cover: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
  sectionLabel: {
    fontSize: 23,
    width: '100%',
    paddingBottom: 8,
    paddingTop: 24,
  },
  navInput: {
    fontSize: 15,
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    textAlign: 'auto',
    backgroundColor: 'transparent',
    fontWeight: 'normal',
  },
  navInputBorder: {
    borderWidth: 0,
  },
  navDescription: {
    paddingTop: 18,
  },
  navDivider: {
    marginLeft: 16,
    marginRight: 16,
    marginTop: 2,
    marginBottom: 2,
  },
  form: {
    width: '100%',
    display: 'flex',
    flexGrow: 1,
    height: '100%',
    paddingLeft: 16,
    paddingRight: 16,
    borderRadius: 4,
  },
  data: {
    width: '100%',
    borderRadius: 8,
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 8,
    paddingBottom: 8,
  },
  nameTag: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
    paddingTop: 24,
    paddingBottom: 8,
    minWidth: 0,
  },
  name: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    textWrap: 'nowrap',
    flexShrink: 1,
  },
  namePlaceholder: {
    fontStyle: 'italic',
    flexShrink: 1,
  },
  tag: {
    borderRadius: 8,
    padding: 4,
    paddingLeft: 8,
    paddingRight: 8,
  },
  tagLabel: {
    color: 'white',
  },
  navTitle: {
    color: 'white',
    flexGrow: 1,
    textAlign: 'center',
  },
  navIcon: {
    color: 'white',
    width: 48,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  navImage: {
    width: '100%',
    maxHeight: 256,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    marginBottom: 16,
    position: 'absolute',
  },
  overlap: {
    position: 'absolute',
    top: 252,
    borderRadius: 8,
    width: '100%',
    height: 8,
  },
  imageSpacer: {
    width: '100%',
    height: 252,
  },
  navLogo: {
    width: '100%',
    height: null,
    aspectRatio: 1,
  },
  scrollWrapper: {
    flexGrow: 1,
    height: 1,
  },
  scrollContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    paddingBottom: 128,
  },
  body: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    paddingLeft: 16,
    paddingRight: 16,
  },
  header: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    zIndex: 1,
  },
  headerLabel: {
    flexShrink: 1,
    fontSize: 22,
    textAlign: 'center',
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    paddingTop: 16,
    paddingBottom: 12,
    paddingLeft: 16,
    paddingRight: 16,
    flexGrow: 1,
    verticalAlign: 'baseline',
    lineHeight: 22,
  },
  spaceHolder: {
    width: 72,
  },
  back: {
    flexShrink: 0,
    marginRight: 0,
    marginLeft: 0,
    marginTop: 4,
    marginBottom: 4,
    backgroundColor: 'transparent',
  },
  image: {
    position: 'relative',
    width: '90%',
    maxWidth: 250,
    marginTop: 16,
    marginBottom: 8,
  },
  logo: {
    aspectRatio: 1,
    resizeMode: 'contain',
    borderRadius: 8,
    width: null,
    height: null,
    borderWidth: 1,
  },
  line: {
    marginTop: 16,
    marginBottom: 16,
    height: 2,
    width: '100%',
  },
  border: {
    width: '100%',
    height: 2,
  },
  attributes: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    width: '100%',
    paddingTop: 12,
  },
  attribute: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 32,
    paddingRight: 32,
  },
  icon: {
    flexShrink: 0,
    width: 32,
    display: 'flex',
    justifyContent: 'flex-start',
    height: '100%',
    backgroundColor: 'transparent',
  },
  label: {
    fontSize: 16,
  },
  labelUnset: {
    fontSize: 16,
    fontStyle: 'italic',
    flexGrow: 1,
  },
  labelSet: {
    fontSize: 16,
    flexGrow: 1,
  },
  nameSet: {
    fontSize: 24,
    width: '100%',
    paddingLeft: 32,
    paddingRight: 72,
  },
  nameUnset: {
    fontSize: 24,
    width: '100%',
    paddingLeft: 32,
    paddingRight: 32,
    fontStyle: 'italic',
  },
  status: {
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  unknownStatus: {
    color: Colors.unsaved,
    fontSize: 14,
  },
  savedStatus: {
    color: Colors.confirmed,
    fontSize: 14,
  },
  pendingStatus: {
    color: Colors.pending,
    fontSize: 14,
  },
  requestedStatus: {
    color: Colors.requested,
    fontSize: 14,
  },
  connectingStatus: {
    color: Colors.connecting,
    fontSize: 14,
  },
  connectedStatus: {
    color: Colors.connected,
    fontSize: 14,
  },
  offsyncStatus: {
    color: Colors.offsync,
    fontSize: 14,
  },
  modal: {
    display: 'flex',
    width: '100%',
    height: '100%',
    alignItems: 'center',
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
  content: {
    display: 'flex',
    justifyContent: 'center',
    height: '100%',
    gap: 8,
  },
  close: {
    paddingTop: 8,
  },
  surface: {
    padding: 16,
  },
  actions: {
    display: 'flex',
    flexDirection: 'row',
    gap: 12,
    flexWrap: 'wrap',
    paddingLeft: 16,
    paddingRight: 16,
    justifyContent: 'center',
  },
  action: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  actionLabel: {
    fontSize: 12,
  },
  actionIcon: {
    position: 'relative',
    top: 8,
    backgroundColor: 'transparent',
    padding: 0,
    margin: 0,
  },
  surfaceMaxWidth: {
    width: '100%',
  },
});
