import React, {useCallback, useState} from 'react';
import {DevSettings, View} from 'react-native';
import * as Updates from 'expo-updates';
import {Typography, Pressable, RadioButton, Dialog} from '@components';
import {useTheme} from '@shared/theme';
import {
  DevEnvironment,
  ENVIRONMENT_LABELS,
  selectedEnvironment,
  setSelectedEnvironment,
} from '@stores/devEnvironment';

import {styles} from './styles';

const ENVIRONMENTS = Object.values(DevEnvironment);
const SNAP_POINTS = ['80%'];

const reloadApp = () => {
  if (__DEV__) {
    DevSettings.reload();
  } else {
    Updates.reloadAsync();
  }
};

export function DevMenu() {
  const {theme} = useTheme();
  const [isVisible, setIsVisible] = useState(false);

  const onOpen = useCallback(() => setIsVisible(true), []);
  const onClose = useCallback(() => setIsVisible(false), []);

  const onSelectEnvironment = useCallback(
    (env: DevEnvironment) => {
      if (env === selectedEnvironment) {
        onClose();
        return;
      }
      setSelectedEnvironment(env);
      onClose();
      setTimeout(reloadApp, 300);
    },
    [onClose],
  );

  return (
    <>
      <Pressable
        onPress={onOpen}
        style={[
          styles.trigger,
          {backgroundColor: theme.background.layout.tertiary},
        ]}>
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {`Environment: ${ENVIRONMENT_LABELS[selectedEnvironment]}`}
        </Typography>
      </Pressable>
      <Dialog
        isVisible={isVisible}
        onClose={onClose}
        title="Switch Environment"
        wrapperType="scrollable"
        snapPoints={SNAP_POINTS}
        enableDynamicSizing={false}>
        <View style={styles.optionsList}>
          {ENVIRONMENTS.map(env => (
            <RadioButton
              key={env}
              title={ENVIRONMENT_LABELS[env]}
              checked={selectedEnvironment === env}
              onPress={() => onSelectEnvironment(env)}
              style={styles.envLabel}
            />
          ))}
        </View>
      </Dialog>
    </>
  );
}