import React, { useState } from 'react';

import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom'


import { Container } from '../components/Container';
import { Banner } from '../components/Banner';
import { Padder } from '../components/Padder';
import { Sidebar } from '../components/Sidebar';
import { Flexbox } from '../components/Flexbox';
import { Box } from '../components/Box';
import { Chart } from '../components/Chart';
import { Table } from '../components/Table';
import { Dialog } from '../components/Dialog';
import { Breadcrumb } from '../components/Breadcrumb';

import { ArrowLeft, Settings } from 'react-feather';

export const DashboardExample = ({ }) => {

    const location = useLocation();

    const [open, setOpen] = useState(false);

    function confirm(){
        setOpen(!open)
    }

    return (
        <Flexbox>
            <Sidebar
                title="acme"
                width={300}
                sectionOne={[
                    {
                        active: location.pathname === '/',
                        text: 'Dashboard',
                        link: '/'
                    },
                    {
                        active: location.pathname === '/transactions',
                        text: 'Transactions',
                        link: '/transactions'
                    },
                    {
                        active: location.pathname === '/payments',
                        text: 'Payments',
                        link: '/payments'
                    }
                ]}
                sectionTwo={[
                    {
                        active: location.pathname === '/documentation',
                        text: 'Documentation',
                        link: '/documentation'
                    }
                ]}
                icons={[
                    {
                        icon: <ArrowLeft width={28} />,
                        action: () => setOpen(true)
                    },
                    {
                        icon: <Settings width={28} />,
                        link: '/settings'
                    }
                ]}  
            />
            <div style={{ width: '70%' }}>
                <Padder top="8rem" left="1em">

                    <Routes>
                        <Route path="/" element={
                            <>
                                <Breadcrumb root={{ text: 'Dashboard', link: '/' }} links={[{ text: 'Payments', link: '/payments' }]} />

                                <h2>Dashboard</h2>

                                <Padder top="1em" bottom="1em">
                                    <Flexbox>
                                        <Box width={300}>
                                            <h4>Balance</h4>
                                            <h1 style={{ color: "#DCDCDC" }}>
                                                $90000
                                            </h1>
                                        </Box>
                                        <Box width={300}>
                                            <h4>Growth</h4>
                                            <h1 style={{ color: "#5BE2A7" }}>
                                                21%
                                            </h1>
                                        </Box>
                                        <Box width={300}>
                                            <h4>Costs</h4>
                                            <h1 style={{ color: "#F95656" }}>
                                                -16%
                                            </h1>
                                        </Box>
                                    </Flexbox>
                                </Padder>

                                <Box>
                                    <label style={{ marginBottom: '4em' }}>Stats timeline</label>
                                    <Chart
                                        options={{
                                            height: 350,
                                            axisX: {
                                                showGrid: false,
                                                showLabel: true
                                            },
                                            axisY: {
                                                labelInterpolationFnc: function (value, index) {
                                                    return index % 2 === 0 ? value : null;
                                                },
                                                showGrid: false,
                                                showLabel: true
                                            },
                                            showArea: true,
                                            showLine: true,
                                            showPoint: true,
                                            fullWidth: true,
                                            fullHeight: true
                                        }}

                                        data={{
                                            labels: ['wed', 'thu', 'fri', 'sat', 'sun'],
                                            series: [
                                                {
                                                    className: 'uptrend',
                                                    name: 'return',
                                                    data: [1, 4, 6, 3, 9]
                                                },
                                                {
                                                    className: 'downtrend',
                                                    name: 'market',
                                                    data: [3, 8, 2, 1, -3]
                                                },
                                            ]
                                        }}

                                        type='Line' />
                                </Box>

                                <Box>
                                    <label style={{ marginBottom: '4em' }}>Balance timeline</label>
                                    <Chart
                                        options={{
                                            height: 350,
                                            axisX: {
                                                showGrid: false,
                                                showLabel: true
                                            },
                                            axisY: {
                                                labelInterpolationFnc: function (value, index) {
                                                    return index % 2 === 0 ? value : null;
                                                },
                                                showGrid: false,
                                                showLabel: true
                                            },
                                            showArea: true,
                                            showLine: true,
                                            showPoint: true,
                                            fullWidth: true,
                                            fullHeight: false
                                        }}

                                        data={{
                                            labels: ['wed', 'thu', 'fri', 'sat', 'sun'],
                                            series: [
                                                {
                                                    name: 'return',
                                                    data: [10000, 40000, 60000, 30000, 90000]
                                                }
                                            ]
                                        }}

                                        type='Line' />
                                </Box>
                            </>
                        } />
                        <Route path="/transactions" element={
                            <>
                                <h2>Transactions</h2>
                                <Padder top="1em" bottom="1em">
                                    <Table
                                        width={800}
                                        height={500}
                                        empty={<label>No data yet</label>}
                                        columns={[
                                            {
                                                header: 'Type',
                                                accessor: 'type',
                                                index: true
                                            },
                                            {
                                                header: 'Payment id',
                                                accessor: 'paymentId',
                                            },
                                            {
                                                header: 'Amount',
                                                accessor: 'amount',
                                            },
                                            {
                                                header: 'Status',
                                                accessor: 'status',
                                            }
                                        ]}

                                        data={[
                                            {
                                                type: 'deposit',
                                                paymentId: '465aorbb4u0ayd8',
                                                amount: 1500,
                                                status: {
                                                    text: 'Pending',
                                                    color: '#FFBD44'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'yte45259ctebdoa',
                                                amount: 6500,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'withdrawal',
                                                paymentId: 'qdovgh2312bdvudd',
                                                amount: 3000,
                                                status: {
                                                    text: 'Cancelled',
                                                    color: '#FF605C'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                            {
                                                type: 'deposit',
                                                paymentId: 'czneiei7w94nvnv',
                                                amount: 1000,
                                                status: {
                                                    text: 'Complete',
                                                    color: '#5BE2A7'
                                                }
                                            },
                                        ]}
                                    />
                                </Padder>
                            </>
                        } />
                        <Route path="/payments" element={
                            <>
                                <h2>Payments</h2>
                            </>
                        } />

                        <Route path="/documentation" element={
                            <>
                                <h2>Documentation</h2>
                            </>
                        } />

                        <Route path="/settings" element={
                            <>
                                <h2>Settings</h2>
                            </>
                        } />
                    </Routes>
                </Padder>
            </div>
            <Dialog 
                content={
                    <label>Are you sure you want to log out?</label>
                } 
                title="Dialog" 
                open={open}
                close={() => { setOpen(!open) }}    
                confirm={confirm}     
            />
        </Flexbox>
        
    );
}