"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _OxyProvider = _interopRequireDefault(require("../components/OxyProvider"));
var _core = require("../../core");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Demo component showcasing the complete account management UI flow
 * This demonstrates how all the account screens work together
 */const AccountManagementDemo = () => {
  const oxyServices = new _core.OxyServices({
    baseURL: 'https://api.oxy.so'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styles.container,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
      style: styles.content,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: styles.title,
        children: "Account Management System Demo"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: styles.description,
        children: "Complete account management flow with 5 interconnected screens:"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.screensList,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
          title: "AccountCenterScreen",
          description: "Main account hub and entry point",
          features: ['User profile display', 'Quick access to all account features', 'Multi-account switching', 'Session management access'],
          navigatesTo: ['AccountOverview', 'AccountSwitcher', 'EditProfile', 'SessionManagement']
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
          title: "AccountOverviewScreen",
          description: "Comprehensive account information and management",
          features: ['Detailed profile information', 'Account settings shortcuts', 'Subscription management', 'Privacy and security overview'],
          navigatesTo: ['EditProfile', 'SessionManagement']
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
          title: "EditProfileScreen",
          description: "Complete account configuration and preferences",
          features: ['Profile editing (username, email, name)', 'Password management', 'Security settings', 'Notification preferences', 'Tabbed interface for organization'],
          navigatesTo: ['Previous screen via goBack()']
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
          title: "AccountSwitcherScreen",
          description: "Multi-account management and switching",
          features: ['View all saved accounts', 'Switch between accounts', 'Remove unwanted accounts', 'Device session management', 'Add new accounts'],
          navigatesTo: ['SignIn', 'Account switching']
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenCard, {
          title: "SessionManagementScreen",
          description: "Active session management across devices",
          features: ['View all active sessions', 'Device information display', 'Logout specific sessions', 'Logout all sessions', 'Session security monitoring'],
          navigatesTo: ['Session logout actions']
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.navigationFlow,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: styles.sectionTitle,
          children: "Navigation Flow"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: styles.flowDescription,
          children: "The screens are designed with intuitive navigation patterns:"
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: styles.flowItem,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowStep,
            children: "1. Entry Point"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowText,
            children: "Users typically start at AccountCenterScreen"
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: styles.flowItem,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowStep,
            children: "2. Explore"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowText,
            children: "Navigate to specific screens based on needs"
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: styles.flowItem,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowStep,
            children: "3. Manage"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowText,
            children: "Perform account actions in specialized screens"
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: styles.flowItem,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowStep,
            children: "4. Return"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.flowText,
            children: "Navigate back or to related screens seamlessly"
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.demoSection,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: styles.sectionTitle,
          children: "Try the Demo"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          style: styles.demoButton,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.demoButtonText,
            children: "Launch Account Center"
          })
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyProvider.default, {
      oxyServices: oxyServices,
      initialScreen: "AccountCenter",
      theme: "light",
      autoPresent: false
    })]
  });
};
const ScreenCard = ({
  title,
  description,
  features,
  navigatesTo
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
  style: styles.screenCard,
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: styles.screenTitle,
    children: title
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: styles.screenDescription,
    children: description
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: styles.featuresTitle,
    children: "Features:"
  }), features.map((feature, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
    style: styles.feature,
    children: ["\u2022 ", feature]
  }, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: styles.navigationTitle,
    children: "Navigates to:"
  }), navigatesTo.map((nav, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
    style: styles.navigationItem,
    children: ["\u2192 ", nav]
  }, index))]
});
const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  content: {
    flex: 1,
    padding: 20
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
    textAlign: 'center'
  },
  description: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
    textAlign: 'center',
    lineHeight: 22
  },
  screensList: {
    marginBottom: 30
  },
  screenCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 20,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  screenTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0066CC',
    marginBottom: 8
  },
  screenDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 12,
    lineHeight: 20
  },
  featuresTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 8
  },
  feature: {
    fontSize: 14,
    color: '#555',
    marginBottom: 4,
    marginLeft: 10
  },
  navigationTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginTop: 12,
    marginBottom: 8
  },
  navigationItem: {
    fontSize: 14,
    color: '#0066CC',
    marginBottom: 4,
    marginLeft: 10
  },
  navigationFlow: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 20,
    marginBottom: 30,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  sectionTitle: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 12
  },
  flowDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 16,
    lineHeight: 20
  },
  flowItem: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 12
  },
  flowStep: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#0066CC',
    minWidth: 80
  },
  flowText: {
    fontSize: 14,
    color: '#555',
    flex: 1,
    lineHeight: 20
  },
  demoSection: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  demoButton: {
    backgroundColor: '#0066CC',
    borderRadius: 25,
    paddingHorizontal: 30,
    paddingVertical: 12,
    marginTop: 10
  },
  demoButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600'
  }
});
var _default = exports.default = AccountManagementDemo;
//# sourceMappingURL=AccountManagementDemo.js.map