import { bindIntercept } from '@greenpay/utils'
import { ThemeProvider } from '@mui/material/styles'
import { useEffect } from '@wordpress/element'
import { Routes, Route, MemoryRouter } from 'react-router'
import { BANK_LOGIN_ROUTE, BankLoginRoute } from '@greenpay/bank-login'
import ClassicPayloadComponent from '../components/ClassicPayload/ClassicPayload'
import GreenPayToast from '../components/GreenPayToast/GreenPayToast'
import DebitComponent from '../components/Debit/Debit'
import PaymentLabelComponent from '../components/PaymentLabel/PaymentLabel'
import PaymentRadioControl from '../components/PaymentRadio/PaymentRadio'
import { useClassicCheckout } from '../hooks/useClassicCheckout'

import theme from '../styles/theme'

interface ClassicProps {
	title: string
	description?: string
	extraMessage?: string
}

/**
 * Woocommerce classic checkout App
 */
const GreenPayClassic: React.FC<ClassicProps> = ({ title, description, extraMessage }) => {
	useClassicCheckout()

	useEffect(() => {
		const unsubscribe = bindIntercept()
		return () => unsubscribe()
	}, [])

	return (
		<ThemeProvider theme={theme}>
			<GreenPayToast />
			<PaymentLabelComponent title={title} description={description} extraMessage={extraMessage} />
			<MemoryRouter>
				<Routes>
					<Route key="index" index element={<PaymentRadioControl />} />
					<Route key="bank-login" path={BANK_LOGIN_ROUTE} element={<BankLoginRoute />} />
					<Route key="debit" path="debit" element={<DebitComponent />} />
				</Routes>
			</MemoryRouter>
			<ClassicPayloadComponent />
		</ThemeProvider>
	)
}

export default GreenPayClassic
