import { useEffect } from 'react';
import { CustomSelectControl } from "../ui/custom-select-control";
import type { CustomSelectOption } from "../ui/custom-select-control";
import { Controller, FormProvider, useForm } from 'react-hook-form';
import { Flex } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { useAuthServiceContext } from '../../services';
import {
    type StaffWorkspace,
    getWorkspaceDisplay,
} from '../../utils/staffRoleCatalog.ts';

interface WorkspaceSwitcherFormValues {
    workspace: StaffWorkspace | '';
}

interface IRoleSwitcherProps {
    onSubmit: (data: { workspace: StaffWorkspace }) => void;
    isProfilePage?: boolean;
}

type WorkspaceSelectOption = CustomSelectOption & {
    value: StaffWorkspace | null;
};

const RoleSwitcher = ({ onSubmit, isProfilePage = false }: IRoleSwitcherProps) => {
    const { availableWorkspaces, selectedWorkspace } = useAuthServiceContext();

    const methods = useForm<WorkspaceSwitcherFormValues>({
        defaultValues: {
            workspace: selectedWorkspace || '',
        },
        mode: 'onChange',
    });

    const { control, handleSubmit, formState, reset } = methods;

    useEffect(() => {
        reset({ workspace: selectedWorkspace || '' });
    }, [reset, selectedWorkspace]);

    const options: WorkspaceSelectOption[] = [
        { key: '', name: 'Select a workspace...', value: null },
        ...availableWorkspaces.map((workspace) => ({
            key: workspace,
            name: getWorkspaceDisplay(workspace),
            value: workspace,
        })),
    ];

    const submitWorkspace = ({ workspace }: WorkspaceSwitcherFormValues) => {
        if (!workspace) {
            return;
        }

        onSubmit({ workspace });
    };

    return (
        <FormProvider {...methods}>
            <form onSubmit={handleSubmit(submitWorkspace)}>
                <Controller
                    name="workspace"
                    control={control}
                    rules={{ required: true }}
                    render={({ field }) => {
                        const currentValue = options.find(
                            (option) => option.value === field.value,
                        ) || options[0];

                        return (
                            <CustomSelectControl
                                label="Available Workspaces"
                                options={options}
                                value={currentValue}
                                onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                    const selectedOption = newValue.selectedItem as WorkspaceSelectOption;
                                    field.onChange(selectedOption.value || '');
                                }}
                            />
                        );
                    }}
                />

                <Spacer margin={isProfilePage ? 8 : 24} />

                <Flex justify="center">
                    <button
                        style={{ width: '100%', justifyContent: 'center' }}
                        className="btn btn-green"
                        type="submit"
                        disabled={!formState.isValid}
                    >
                        {isProfilePage ? 'Switch Workspace' : 'Select Workspace'}
                    </button>
                </Flex>

                <Spacer margin={isProfilePage ? 4 : 0} />
            </form>
        </FormProvider>
    );
};

export default RoleSwitcher;