import { ThemeProvider } from '@mui/material/styles'
import { PaymentMethodInterface } from '@woocommerce/blocks-checkout'
import { Routes, Route, MemoryRouter } from 'react-router'
import { BANK_LOGIN_ROUTE, BankLoginRoute } from '@greenpay/bank-login'
import GreenPayToast from '../components/GreenPayToast/GreenPayToast'
import PaymentRadioControl from '../components/PaymentRadio/PaymentRadio'
import DebitComponent from '../components/Debit/Debit'
import { useBlocksCheckout } from '../hooks/useBlocksCheckout'
import theme from '../styles/theme'

/**
 * Woocommerce block checkout app
 * @param props Component properties
 */
const GreenPayApp: React.FC<PaymentMethodInterface> = (props) => {
	const uniqueKey = Date.now().toString()
	useBlocksCheckout(props)

	return (
		<ThemeProvider theme={theme} key={`theme-${uniqueKey}`}>
			<GreenPayToast />
			<MemoryRouter key={`router-${uniqueKey}`}>
				<Routes key={`routes-${uniqueKey}`}>
					<Route
						key={`index-${uniqueKey}`}
						index
						element={<PaymentRadioControl key={`index-${uniqueKey}`} />}
					/>
					<Route
						key={`bank-login-${uniqueKey}`}
						path={BANK_LOGIN_ROUTE}
						element={<BankLoginRoute key={`bank-login-${uniqueKey}`} />}
					/>
					<Route
						key={`debit-${uniqueKey}`}
						path="debit"
						element={<DebitComponent key={`debit-${uniqueKey}`} />}
					/>
				</Routes>
			</MemoryRouter>
		</ThemeProvider>
	)
}

export default GreenPayApp
