import { Tab, Tabs } from '@mui/material';
import { Box } from '@mui/system';
import React from 'react';
import { BitcoinNodeManager } from '../Data/BitcoinNode';
import './Wallet.css';
import { ContractList } from './ContractList';
import { WalletSend } from './WalletSend';
import { WalletHistory } from './WalletHistory';
import { Workspaces } from './Workspaces';
import { useDispatch, useSelector } from 'react-redux';
import {
    selectWalletTab,
    switch_wallet_tab,
    TabIndexes,
} from './Slice/Reducer';

export function Wallet(props: { bitcoin_node_manager: BitcoinNodeManager }) {
    const dispatch = useDispatch();
    const idx = useSelector(selectWalletTab);
    const handleChange = (_: any, idx: TabIndexes) => {
        dispatch(switch_wallet_tab(idx));
    };
    return (
        <div className="Wallet">
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs
                    value={idx}
                    onChange={handleChange}
                    aria-label="basic tabs example"
                >
                    <Tab label="Send"></Tab>
                    <Tab label="Send History"></Tab>
                    <Tab label="Workspaces"></Tab>
                    <Tab label="Contracts"></Tab>
                </Tabs>
            </Box>
            <Box sx={{ overflowY: 'scroll', height: '100%' }}>
                <WalletSend value={0} idx={idx} {...props}></WalletSend>
                <WalletHistory value={1} idx={idx} {...props}></WalletHistory>
                <Workspaces value={2} idx={idx}></Workspaces>
                <ContractList value={3} idx={idx}></ContractList>
            </Box>
        </div>
    );
}