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';
import { makeAutoObservable } from 'mobx';

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

@injectable()
class JobsNavigationStore {
    jobId: number | null = null;
    staleTime = 1000 * 60 * 10; // 10 minutes
    hasInitialData = true;

    constructor() {
        makeAutoObservable(this);
    }

    navigateToJob = (id: number) => {
        this.jobId = id;
    };

    navigateToJobs = () => {
        this.jobId = null;
    };

    setStaleTime = (staleTime: number) => {
        this.staleTime = staleTime;
    };

    setHasInitialData = (hasInitialData: boolean) => {
        this.hasInitialData = hasInitialData;
    };
}

@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);
        });
    }

    async getJob(id: number): Promise<{ data: Job }> {
        // eslint-disable-next-line no-console
        console.log(`Fetching job with id ${id}...`);
        // Simulate an API call
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    data: { id, title: `Job ${id}`, description: `Description ${id}` },
                });
            }, 2000);
        });
    }
}

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

    get queryOptions(): QueryApiOptions<Job[]> {
        return {
            queryKey: ['demo', 'jobs'],
            queryFn: async () => (await this.api?.get())?.data || [],
            staleTime: this.navigationStore?.staleTime,
        };
    }
}

@injectable()
class JobStore extends QueryApiStore<Job | undefined> {
    @inject(JobsApi) protected api?: JobsApi;
    @inject(JobsNavigationStore) protected navigationStore?: JobsNavigationStore;

    get queryOptions(): QueryApiOptions<Job | undefined> {
        const jobId = this.navigationStore?.jobId;
        return {
            queryKey: ['demo', 'jobs', jobId],
            queryFn: async () => (await this.api?.getJob(jobId!))?.data,
            enabled: Boolean(jobId),
            initialData: (() => {
                if (!this.navigationStore?.hasInitialData) {
                    return undefined;
                }
                const jobs = this.queryClientStore?.queryClient.getQueryState<Job[]>([
                    'jobs',
                ])?.data;
                return jobs?.find(j => j.id === jobId);
            })(),
            staleTime: this.navigationStore?.staleTime,
        };
    }
}

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

        return (
            <Fragment>
                <h4>Jobs</h4>
                <p>isFetching: {isFetching ? 'true' : 'false'}</p>
                <p>isLoading: {isLoading ? 'true' : 'false'}</p>
                <ul>
                    {data?.map(job => (
                        <li key={job.id}>
                            <h4>
                                <button onClick={() => navigateToJob(job.id)}>{job.title}</button>
                            </h4>
                            <p>{job.description}</p>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    })
);

const Job = provide({
    singletons: [JobsApi, JobStore],
})(
    observer(() => {
        const [{ navigateToJobs }, { data, isFetching, isLoading }] = useDependencies(
            JobsNavigationStore,
            JobStore
        );

        return (
            <Fragment>
                <h4>{data?.title}</h4>
                <p>isFetching: {isFetching ? 'true' : 'false'}</p>
                <p>isLoading: {isLoading ? 'true' : 'false'}</p>
                <p>Description: {data?.description}</p>
                <button onClick={navigateToJobs}>Back to Jobs</button>
            </Fragment>
        );
    })
);

export const RelatedQueriesExample = provide({
    singletons: [JobsNavigationStore, QueryClientStore],
})(
    observer(() => {
        const [showApp, setShowApp] = useState(false);
        const [{ hasInitialData, jobId, setHasInitialData, setStaleTime, staleTime }] =
            useDependencies(JobsNavigationStore);

        return (
            <div>
                <h4>Example with related queries</h4>
                <p>
                    In this example, a Jobs component is first rendered. The Jobs component uses a
                    store with query key <code>['demo', 'jobs']</code> and a query to fetch jobs.
                </p>
                <p>
                    If a job is clicked, the Job component is rendered. The Job component uses a
                    store with query key <code>['demo', 'jobs', id]</code> and a query to fetch a
                    single job.
                </p>
                <hr />
                <p>
                    If you set initialData to "cached job", then the JobStore's{' '}
                    <code>{`queryOptions: { initialData }`}</code> will be set to the cached data
                    for the corresponding job. This means that when a Job is rendered, no loading
                    occurs because the cached data is already available. <code>staleTime</code> is
                    respected.
                </p>
                <p>
                    If it is set to "undefined", then no <code>initialData</code> will be set, and
                    you will notice a load occurring on the first render of that Job.
                </p>
                <div>
                    <label htmlFor="hasInitialDataFalse">
                        initialData:{' '}
                        <input
                            id="hasInitialDataFalse"
                            checked={hasInitialData}
                            type="radio"
                            name="hasInitialData"
                            onChange={() => setHasInitialData(true)}
                        />
                    </label>{' '}
                    <label htmlFor="hasInitialDataTrue">
                        cached job{' '}
                        <input
                            id="hasInitialDataTrue"
                            checked={!hasInitialData}
                            type="radio"
                            name="hasInitialData"
                            onChange={() => setHasInitialData(false)}
                        />{' '}
                        undefined
                    </label>
                </div>
                <hr />
                <p>
                    <code>staleTime</code> defaults to 10 minutes, and controls how long before data
                    is considered stale and needs to be refetched in the background. This uses a
                    technique called "stale-while-revalidate" to ensure that cached data is
                    available to display while it is being updated in the background.
                </p>
                <p>
                    When set to 10 minutes, when you navigate back and forth between Jobs and a
                    single Job, you will notice that <code>isFetching</code> is <code>false</code>,
                    which means no fetch is occurring. If you set <code>staleTime</code> to{' '}
                    <code>0</code>, data will always be considered stale immediately and you will
                    notice <code>isFetching</code> will be true as fetching occurs when navigating.
                </p>
                <div>
                    staleTime:{' '}
                    <input
                        type="text"
                        value={staleTime}
                        onChange={e => setStaleTime(Number(e.target.value))}
                    />
                    <button onClick={() => setStaleTime(0)}>Set staleTime to 0</button>
                    <button onClick={() => setStaleTime(1000 * 60 * 10)}>
                        Set staleTime to 10 minutes
                    </button>
                </div>
                <hr />
                {!showApp && (
                    <button
                        onClick={() => setShowApp(!showApp)}
                        style={{ fontSize: '16px', padding: '10px' }}
                    >
                        Load example
                    </button>
                )}
                {showApp && (jobId ? <Job /> : <Jobs />)}
            </div>
        );
    })
);