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

export const styles = StyleSheet.create({
  anchor: {
    width: 32,
    height: 32,
  },
  handle: {
    marginTop: 8,
  },
  more: {
    paddingTop: 16,
  },
  username: {
    fontWeight: 'bold',
  },
  menuContent: {
    borderRadius: 8,
  },
  sectionLabel: {
    width: '100%',
    paddingLeft: 18,
    paddingBottom: 8,
    paddingTop: 16,
  },
  inputBorder: {
    borderWidth: 0,
    borderRadius: 12,
  },
  modalInputBorder: {
    borderRadius: 8,
  },
  onboardPad: {
    width: '100%',
    height: 1024,
  },
  modalWarn: {
    marginTop: 8,
    textAlign: 'center',
    fontSize: 14,
    paddingTop: 8,
    fontWeight: 500,
    fontStyle: 'italic',
  },
  modalSurface: {
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.4,
    shadowRadius: 3,
  },
  modalContent: {
    borderRadius: 8,
    paddingTop: 32,
    paddingBottom: 32,
    paddingLeft: 20,
    paddingRight: 20,
  },
  navHeader: {
    height: 72,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 16,
  },
  logoutSpace: {
    marginTop: 28,
    marginBottom: 20,
  },
  smHeader: {
    fontSize: 24,
    fontWeight: 600,
    minWidth: 0,
    flexShrink: 1,
    color: 'white',
    paddingLeft: 24,
  },
  modalPrompt: {
    paddingTop: 28,
    paddingBottom: 16,
    fontSize: 15,
    textAlign: 'center',
    fontWeight: 500,
  },
  smLabel: {
    fontSize: 24,
    fontWeight: 600,
    minWidth: 0,
    flexShrink: 1,
    color: 'white',
  },
  slider: {
    paddingLeft: 16,
    paddingRight: 16,
    position: 'relative',
    top: -8,
  },
  navForm: {
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 16,
    width: '100%',
  },
  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: 253,
    borderRadius: 4,
    width: '100%',
    height: 8,
  },
  imageSpacer: {
    width: '100%',
    height: 253,
  },
  navLogo: {
    width: '100%',
    height: null,
    aspectRatio: 1,
  },
  navLabel: {
    width: '100%',
    padding: 16,
    paddingTop: 24,
  },
  navInput: {
    fontSize: 15,
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    textAlign: 'auto',
    backgroundColor: 'transparent',
    fontWeight: 'normal',
  },
  navFullInput: {
    fontSize: 16,
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    textAlign: 'auto',
    backgroundColor: 'transparent',
    width: '100%',
  },
  navDescription: {
    paddingTop: 18,
  },
  navInputBorder: {
    borderWidth: 0,
  },
  navWrapper: {
    width: '100%',
    paddingLeft: 16,
    paddingRight: 16,
    marginBottom: 16,
  },
  navData: {
    width: '100%',
    borderRadius: 6,
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 8,
    paddingBottom: 8,
  },
  navDivider: {
    marginLeft: 16,
    marginRight: 16,
    marginTop: 2,
    marginBottom: 2,
  },
  navUpload: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    alignItems: 'center',
  },
  navPress: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  navSubmit: {
    borderRadius: 8,
    paddingLeft: 16,
    paddingRight: 16,
  },
  modal: {
    display: 'flex',
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  border: {
    height: 2,
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    borderRadius: 8,
  },
  inputIcon: {
    backgroundColor: 'transparent',
  },
  full: {
    width: '100%',
    height: '100%',
  },
  container: {
    width: 500,
    maxWidth: '95%',
  },
  content: {
    display: 'flex',
    justifyContent: 'center',
    height: '100%',
    gap: 8,
    paddingLeft: 6,
    paddingRight: 6,
  },
  surface: {
    padding: 16,
    borderRadius: 8,
    gap: 16,
  },
  close: {
    paddingTop: 8,
  },
  settings: {
    width: '100%',
    height: '100%',
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  scrollWrapper: {
    width: '100%',
    flexGrow: 1,
    height: 1,
  },
  scrollContainer: {
    display: 'flex',
    alignItems: 'center',
    paddingBottom: 92,
    width: '100%',
  },
  modalHeader: {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
  },
  modalLabel: {
    fontSize: 20,
    fontWeight: 600,
    paddingLeft: 32,
    paddingRight: 32,
    textAlign: 'center',
    paddingBottom: 8,
  },
  modalClose: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: 'transparent',
  },
  modalControls: {
    display: 'flex',
    flexDirection: 'row',
    gap: 32,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 16,
  },
  modalControl: {
    borderRadius: 8,
    minWidth: 0,
    flex: 1,
    maxWidth: 256,
    margin: 0,
    width: 'auto',
  },
  modalControlLarge: {
    flex: 2,
  },
  modalControlContent: {
    paddingTop: 5,
    paddingBottom: 5,
    width: 'auto',
  },
  modalDescription: {
    paddingTop: 28,
    paddingBottom: 16,
    textAlign: 'center',
  },
  title: {
    width: '100%',
  },
  header: {
    fontSize: 22,
    textAlign: 'center',
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    height: 64,
    paddingTop: 16,
  },
  image: {
    position: 'relative',
    width: '90%',
    maxWidth: 250,
    marginTop: 16,
    marginBottom: 8,
  },
  logoSet: {
    aspectRatio: 1,
    resizeMode: 'contain',
    borderRadius: 8,
    width: null,
    height: null,
    borderWidth: 1,
  },
  logoUnset: {
    aspectRatio: 1,
    resizeMode: 'contain',
    borderRadius: 8,
    width: null,
    height: null,
    borderWidth: 1.5,
    borderColor: Colors.primary,
  },
  editDetails: {
    borderBottomLeftRadius: 8,
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    right: 16,
  },
  editDetailsLabel: {
    fontSize: 16,
    color: Colors.primary,
    paddingLeft: 8,
    paddingRight: 8,
    paddingTop: 4,
    paddingBottom: 4,
  },
  editBar: {
    position: 'absolute',
    top: 0,
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  editLogo: {
    fontSize: 16,
    paddingBottom: 2,
    paddingLeft: 12,
    paddingRight: 12,
    color: Colors.primary,
  },
  editBorder: {
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderColor: Colors.primary,
  },
  divider: {
    width: '100%',
    paddingLeft: 16,
    paddingRight: 16,
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    paddingTop: 12,
  },
  nameSet: {
    fontSize: 24,
    width: '100%',
    paddingLeft: 32,
    paddingRight: 72,
  },
  nameUnset: {
    fontSize: 24,
    width: '100%',
    paddingLeft: 32,
    paddingRight: 32,
    fontStyle: 'italic',
  },
  options: {
    width: '100%',
    paddingTop: 12,
    paddingBottom: 16,
  },
  option: {
    fontSize: 12,
    color: Colors.primary,
  },
  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',
  },
  modalOption: {
    flexGrow: 1,
    display: 'flex',
    alignItems: 'flex-begin',
  },
  modalOther: {
    flexGrow: 1,
    display: 'flex',
    alignItems: 'flex-end',
  },
  optionIcon: {
    backgroundColor: 'transparent',
  },
  deleteButton: {
    backgroundColor: Colors.danger,
  },
  label: {
    fontSize: 16,
  },
  smallLabel: {
    wordBreak: 'break-all',
  },
  labelUnset: {
    fontSize: 16,
    fontStyle: 'italic',
    flexGrow: 1,
  },
  labelSet: {
    fontSize: 16,
    flexGrow: 1,
    width: '10%',
  },
  allControl: {
    flexShrink: 1,
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 32,
  },
  control: {
    flexShrink: 1,
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  radioIcon: {
    flexShrink: 0,
    width: 32,
    display: 'flex',
    justifyContent: 'center',
  },
  radioControl: {
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  radioButtons: {
    display: 'flex',
    flexDirection: 'row',
  },
  controlIcon: {
    flexShrink: 0,
    width: 32,
  },
  controlLabel: {
    fontWeight: 500,
    fontSize: 16,
  },
  dangerLabel: {
    fontSize: 16,
    color: Colors.danger,
  },
  controlAlign: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    flexGrow: 1,
    paddingRight: 8,
  },
  controlSwitch: {
    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
  },
  input: {
    width: '100%',
    marginTop: 16,
    marginBottom: 16,
  },
  secretImage: {
    width: 192,
    height: 192,
    alignSelf: 'center',
    borderRadius: 8,
    margin: 16,
  },
  secretText: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 16,
    paddingLeft: 8,
    paddingRight: 8,
  },
  secret: {
    paddingRight: 16,
  },
  secretIcon: {
    marginLeft: 8,
  },
  authMessage: {
    height: 24,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 8,
  },
  authMessageText: {
    fontSize: 16,
    color: Colors.danger,
  },
  radio: {
    borderRadius: 32,
  },
  blocked: {
    minHeight: 128,
    maxHeight: 256,
    width: '100%',
    borderRadius: 4,
    borderWidth: 1,
  },
  blockedContent: {
    width: '80%',
    maxWidth: 500,
  },
  blockedSurface: {
    width: '100%',
    borderRadius: 8,
    paddingLeft: 16,
    paddingRight: 16,
  },
  blockedHeader: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: 16,
  },
  blockedTitle: {
    flexGrow: 1,
    fontSize: 20,
    paddingLeft: 8,
  },
  blockedClose: {
    backgroundColor: 'transparent',
    padding: 0,
    margin: 0,
  },
  blockedDone: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 16,
  },
  blockedButton: {
    borderRadius: 8,
  },
  blockedError: {
    color: Colors.offsync,
    flexGrow: 1,
    paddingLeft: 8,
  },
  blockedEmpty: {
    width: '100%',
    height: 128,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  blockedLabel: {
    fontSize: 16,
    color: Colors.placeholder,
  },
  blockedItems: {
    width: '100%',
  },
  blockedItem: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 0.2,
  },
  blockedAction: {
    backgroundColor: 'transparent',
  },
  blockedValue: {
    fontSize: 16,
    flexGrow: 1,
    paddingLeft: 16,
  },
  surfaceMaxWidth: {
    width: '100%',
  },
  navFont: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    alignItems: 'center',
  },
  line: {
    height: 2,
  },
  navSkip: {
    backgroundColor: 'transparent',
  },
  splitLabel: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    paddingRight: 24,
  },
  labelValue: {
    fontSize: 14,
  },
});
