import { Fieldset, Group, Stack } from "@mantine/core";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import useIsMobile from "@/hooks/utils/useIsMobile";
import ClientSelect from "@/modules/dealModularEditorTabs/Clients/components/ClientSelect";
import { useClientTabContext } from "../contexts/ClientTabContext";

const ClientSelectForm = () => {
    const {
        client,
        setClient,
        submitClientSelection,
        form,
        isEditorDisabled,
        deal,
    } = useClientTabContext();
    const isMobile = useIsMobile();

    return (
        <Fieldset
            legend={"Выбор клиента"}
            radius={"md"}
            flex={1}>
            <Stack gap={"xs"}>
                <ClientSelect
                    value={client}
                    onChange={setClient}
                    disabled={form.isDirty()}
                    deal={deal}
                    includeDeleted
                />
                <Group>
                    <InlineButton
                        onClick={submitClientSelection}
                        disabled={!isEditorDisabled}
                        w={isMobile ? "100%" : "auto"}>
                        Сохранить
                    </InlineButton>
                </Group>
            </Stack>
        </Fieldset>
    );
};

export default ClientSelectForm;
