// Copyright 2023 The Casdoor Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import * as React from "react";
import {Dimensions, FlatList, Text, TouchableOpacity, View} from "react-native";
import {Avatar, Divider, IconButton, List, Modal, Portal} from "react-native-paper";
import SearchBar from "./SearchBar";
import {GestureHandlerRootView, Swipeable} from "react-native-gesture-handler";
import EnterAccountDetails from "./EnterAccountDetails";
import Account from "./Account";
import ScanQRCode from "./ScanQRCode";
import EditAccountDetails from "./EditAccountDetails";
export default function HomePage() {
const [isPlusButton, setIsPlusButton] = React.useState(true);
const [showOptions, setShowOptions] = React.useState(false);
const [showEnterAccountModal, setShowEnterAccountModal] = React.useState(false);
const [accountList, setAccountList] = React.useState([]);
const [searchQuery, setSearchQuery] = React.useState("");
const [filteredData, setFilteredData] = React.useState(accountList);
const [showScanner, setShowScanner] = React.useState(false);
const [showEditAccountModal, setShowEditAccountModal] = React.useState(false);
const swipeableRef = React.useRef(null);
const [placeholder, setPlaceholder] = React.useState("");
const closeEditAccountModal = () => {
setShowEditAccountModal(false);
};
const handleScanPress = () => {
setShowScanner(true);
setIsPlusButton(true);
setShowOptions(false);
};
const handleCloseScanner = () => {
setShowScanner(false);
};
const togglePlusButton = () => {
setIsPlusButton(!isPlusButton);
setShowOptions(!showOptions);
};
const closeOptions = () => {
setIsPlusButton(true);
setShowOptions(false);
setShowScanner(false);
};
const openEnterAccountModal = () => {
setShowEnterAccountModal(true);
closeOptions();
};
const closeEnterAccountModal = () => {
setShowEnterAccountModal(false);
};
const onUpdate = () => {
setAccountList(prevList => [...prevList]);
};
const handleAddAccount = (accountData) => {
const newAccount = new Account(accountData.description, accountData.secretCode, onUpdate, accountData.icon);
const token = newAccount.generateToken();
newAccount.token = token;
setAccountList(prevList => [...prevList, newAccount]);
closeEnterAccountModal();
};
const handleDeleteAccount = (accountDescp) => {
const accountToDelete = accountList.find(account => {
return account.getTitle() === accountDescp;
});
if (accountToDelete) {
accountToDelete.deleteAccount();
}
setAccountList(prevList => prevList.filter(account => account.getTitle() !== accountDescp));
};
const handleEditAccount = (accountDescp) => {
closeSwipeableMenu();
setPlaceholder(accountDescp);
setShowEditAccountModal(true);
const accountToEdit = accountList.find(account => account.getTitle() === accountDescp);
if (accountToEdit) {
accountToEdit.setEditingStatus(true);
}
};
const onAccountEdit = (accountDescp) => {
const accountToEdit = accountList.find(account => account.getEditStatus() === true);
if (accountToEdit) {
accountToEdit.setTitle(accountDescp);
}
setPlaceholder("");
closeEditAccountModal();
};
const closeSwipeableMenu = () => {
if (swipeableRef.current) {
swipeableRef.current.close();
}
};
const handleSearch = (query) => {
setSearchQuery(query);
if (query.trim() !== "") {
const filteredResults = accountList.filter(item =>
item.title.toLowerCase().includes(query.toLowerCase())
);
setFilteredData(filteredResults);
} else {
setFilteredData(accountList);
}
};
const {width, height} = Dimensions.get("window");
const offsetX = width * 0.45;
const offsetY = height * 0.2;
return (
index.toString()}
renderItem={({item}) => (
(
Edit
Delete
)}
>
{item.title}
{item.token}
{item.countdowns}s
}
left={(props) => (
item.icon ?
:
)}
/>
)}
ItemSeparatorComponent={() => }
/>
Scan QR code
Enter Secret code
{showScanner && (
)}
);
}