import React from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import ActionSheet, { Route } from 'react-native-actions-sheet';
import RouteSearch from './RouteSearch';
import RouteAddGroup from './RouteAddGroup';
import RouteAddUsers from './RouteAddUsers';
import { useGroupChatStore } from 'src/stores/groupChatStore';

const SearchModal = () => {
  const { clearStore } = useGroupChatStore();
  const routes: Route[] = [
    {
      name: 'route-search',
      component: RouteSearch
    },
    {
      name: 'route-add-users',
      component: RouteAddUsers
    },
    {
      name: 'route-add-group',
      component: RouteAddGroup
    }
  ];

  return (
    <ActionSheet
      id="search-modal"
      containerStyle={styles.sheetContainer}
      defaultOverlayOpacity={0.5}
      routes={routes}
      initialRoute="route-search"
      closeOnTouchBackdrop={false}
      keyboardHandlerEnabled={false}
      onClose={() => clearStore()}
    />
  );
};

const styles = StyleSheet.create({
  sheetContainer: {
    height: '95%',
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    paddingHorizontal: 16
  }
});

export default SearchModal;