import routes, { retainingFunnelPrefix } from '@/routes'
import { Route, Routes } from 'react-router-dom'
import Layout from './Layout';
import CancelSubscriptionPage from '@/components/RetainingFunnel/pages/CancelSubscription';
import AppreciateChoicePage from '@/components/RetainingFunnel/pages/AppreciateChoice';
import StepperLayout from './StepperLayout';
import WhatReasonPage from '@/components/RetainingFunnel/pages/WhatReason';
import SecondChancePage from '@/components/RetainingFunnel/pages/SecondChance';
import PlanCancelledPage from '@/components/RetainingFunnel/pages/PlanCancelled';
import SubscriptionStoppedPage from '@/components/RetainingFunnel/pages/SubscriptionStopped';
import ChangeMindPage from '@/components/RetainingFunnel/pages/ChangeMind';
import StopFor30DaysPage from '@/components/RetainingFunnel/pages/StopFor30Days';
import CancellationOfSubscription from '@/components/RetainingFunnel/pages/CancellationOfSubscription';
import Stay50Done from '@/components/RetainingFunnel/pages/Stay50Done';

const removePrefix = (path: string) => path.replace(retainingFunnelPrefix, "");

function RetainingFunnelRoutes() {

    return (
        <Routes>
            <Route element={<Layout />}>
                <Route
                    path={removePrefix(routes.client.retainingFunnelCancelSubscription())}
                    element={
                        <CancelSubscriptionPage />
                    }
                />

                <Route element={<StepperLayout />}>
                    <Route
                        path={removePrefix(routes.client.retainingFunnelAppreciateChoice())}
                        element={
                            <AppreciateChoicePage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelWhatReason())}
                        element={
                            <WhatReasonPage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelSecondChance())}
                        element={
                            <SecondChancePage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelPlanCancelled())}
                        element={
                            <PlanCancelledPage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelSubscriptionStopped())}
                        element={
                            <SubscriptionStoppedPage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelChangeMind())}
                        element={
                            <ChangeMindPage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelStopFor30Days())}
                        element={
                            <StopFor30DaysPage />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelCancellationOfSubscription())}
                        element={
                            <CancellationOfSubscription />
                        }
                    />

                    <Route
                        path={removePrefix(routes.client.retainingFunnelStay50Done())}
                        element={
                            <Stay50Done />
                        }
                    />
                </Route>
            </Route>
        </Routes>
    )
}

export default RetainingFunnelRoutes