import { inject, injectable, provide, useDependencies } from '@servicetitan/react-ioc';
import { observer } from 'mobx-react';
import { QueryApiStore } from '../utils/query-api.store';
import type { QueryApiOptions } from '../utils/query.api';
import { Fragment, useState } from 'react';
import { QueryClientStore } from '../utils/query-client.store';

interface Job {
    id: number;
    title: string;
    description: string;
}

@injectable()
class JobsApi {
    async get(): Promise<{ data: Job[] }> {
        // eslint-disable-next-line no-console
        console.log('Fetching jobs...');
        // Simulate an API call
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    data: [
                        { id: 1, title: 'Job 1', description: 'Description 1' },
                        { id: 2, title: 'Job 2', description: 'Description 2' },
                    ],
                });
            }, 2000);
        });
    }
}

@injectable()
class JobsStore extends QueryApiStore<Job[]> {
    @inject(JobsApi) protected api?: JobsApi;

    get queryOptions(): QueryApiOptions<Job[]> {
        return {
            globalClient: 'app', // Creates global application client
            queryKey: ['demo', 'jobs'],
            queryFn: async () => (await this.api?.get())?.data || [],
        };
    }
}

const Jobs = provide({
    singletons: [QueryClientStore, JobsApi, JobsStore],
})(
    observer(() => {
        const [{ data, isLoading }] = useDependencies(JobsStore);

        if (isLoading) {
            return <div>Loading for 2 seconds...</div>;
        }

        return (
            <Fragment>
                <h4>
                    Jobs -{' '}
                    <code>{`provide({ singletons: [QueryClientStore, JobsApi, JobsStore] })`}</code>
                </h4>
                <ul>
                    {data?.map(job => (
                        <li key={job.id}>
                            <h4>{job.title}</h4>
                            <p>{job.description}</p>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    })
);

const Page1 = () => {
    return (
        <div>
            <h4>Page 1</h4>
            <Jobs />
            <Jobs />
        </div>
    );
};

const Page2 = () => {
    return (
        <div>
            <h4>Page 2</h4>
            <Jobs />
            <Jobs />
        </div>
    );
};

export const AppExample = () => {
    const [page, setPage] = useState(1);
    const [showApp, setShowApp] = useState(false);

    return (
        <div>
            <p>
                In this example are two pages, each containing two Jobs components. The Jobs
                component uses a query to fetch job listings, and uses the 'app' queryClient.
            </p>
            <p>
                You will notice in the console that when the page first loads, only one fetch occurs
                for both components on the page because the query is deduped.
            </p>
            <p>
                Then when you navigate to the second page, no fetch occurs because the results of
                the query are cached.
            </p>
            <hr />
            {!showApp && (
                <button
                    onClick={() => setShowApp(!showApp)}
                    style={{ fontSize: '16px', padding: '10px' }}
                >
                    Load example
                </button>
            )}
            {showApp && (
                <Fragment>
                    <button onClick={() => setPage(1)}>Page 1</button>
                    <button onClick={() => setPage(2)}>Page 2</button>
                    {page === 1 && <Page1 />}
                    {page === 2 && <Page2 />}
                </Fragment>
            )}
        </div>
    );
};