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

export const styles = StyleSheet.create({
  setup: {
    position: 'relative',
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
    minWidth: 0,
  },
  scrollWrapper: {
    width: '100%',
    flexGrow: 1,
    height: 1,
  },
  scrollContainer: {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
  },
  sectionLabel: {
    width: '100%',
    paddingLeft: 18,
    paddingBottom: 8,
    paddingTop: 16,
  },
  navForm: {
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 16,
    width: '100%',
    paddingBottom: 128,
  },
  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,
  },
  field: {
    width: '100%',
    paddingTop: 20,
    paddingBottom: 20,
    paddingLeft: 20,
    paddingRight: 20,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  fieldData: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  fieldLabel: {
    fontSize: 15,
  },
  fieldInput: {
    fontSize: 15,
    textWrap: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    textAlign: 'auto',
    backgroundColor: 'transparent',
    fontWeight: 'normal',
  },
  fieldInputBorder: {},
  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,
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    flexGrow: 1,
    minWidth: 0,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: 48,
    paddingLeft: 16,
    paddingRight: 16,
  },
  line: {
    width: '100%',
  },
  divider: {
    width: '100%',
    marginTop: 8,
    marginBottom: 8,
  },
  form: {
    width: '100%',
    flexGrow: 1,
    flexShrink: 1,
    minHeight: 0,
    height: 100,
    minWidth: 0,
    position: 'relative',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 16,
    paddingBottom: 64,
    minWidth: 0,
  },
  busy: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 32,
    height: '100%',
  },
  option: {
    width: '100%',
    height: 32,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    marginBottom: 6,
    paddingLeft: 16,
    paddingRight: 16,
    minWidth: 0,
  },
  label: {
    fontSize: 14,
    minWidth: 0,
  },
  inputSurface: {
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 0,
    marginRight: 8,
    marginLeft: 8,
    display: 'flex',
    borderRadius: 8,
  },
  input: {
    flexGrow: 1,
    backgroundColor: 'transparent',
    paddingTop: 0,
    paddingBottom: 0,
    display: 'flex',
    height: 32,
    maxHeight: 32,
    borderRadius: 8,
    minWidth: 0,
    flexShrink: 1,
    fontSize: 14,
  },
  inputUnderline: {
    display: 'none',
  },
  radioSelect: {
    display: 'flex',
    flexDirection: 'row',
    paddingLeft: 50,
    height: 32,
    gap: 24,
  },
  radio: {
    padding: 0,
    margin: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 72,
  },
  radioLabel: {
    fontSize: 12,
    position: 'absolute',
    left: -36,
    fontWeight: 'bold',
  },
  separator: {
    marginLeft: 16,
    marginRight: 16,
  },
  selectOptions: {
    display: 'flex',
    flexDirection: 'row',
    gap: 16,
    height: 28,
    alignItems: 'center',
  },
  selectLabel: {
    fontSize: 14,
  },
  selectOption: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingRight: 16,
  },
  checked: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
  },
  unchecked: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
  },
  selectButton: {
    padding: 0,
    margin: 0,
  },
  controlSwitch: {
    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
  },
  fieldSwitch: {
    position: 'relative',
    left: 8,
    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
  },
  ice: {
    width: '100%',
    display: 'flex',
    minHeight: 256,
  },
  modal: {
    display: 'flex',
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
  modalHeader: {
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
  },
  modalLabel: {
    fontSize: 20,
  },
  modalClose: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: 'transparent',
  },
  modalControls: {
    display: 'flex',
    flexDirection: 'row',
    gap: 16,
    justifyContent: 'flex-end',
    alignItems: 'center',
    marginTop: 16,
  },
  modalDescription: {
    paddingTop: 16,
  },
  authMessage: {
    height: 24,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 8,
  },
  authMessageText: {
    fontSize: 16,
    color: Colors.danger,
  },
  modalContent: {
    display: 'flex',
    justifyContent: 'center',
    height: '100%',
    maxWidth: 300,
    gap: 8,
    paddingLeft: 6,
    paddingRight: 6,
  },
  modalSurface: {
    padding: 16,
    borderRadius: 8,
  },
  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,
  },
  icon: {
    backgroundColor: 'transparent',
  },
  fullContainer: {
    width: '100%',
    height: '100%',
  },
  headerContainer: {
    width: '100%',
    display: 'flex',
    height: 72,
    justifyContent: 'center',
    alignItems: 'flex-begin',
    paddingBottom: 16,
    paddingRight: 32,
    paddingLeft: 32,
  },
  headerText: {
    color: 'white',
    fontSize: 24,
    fontWeight: '600',
  },
  absoluteOverlay: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
  },
  radioSelected: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
  },
  radioUnselected: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
  },
});
