import {
    AvatarFigurePartType,
    GetAvatarRenderManager,
    GetSessionDataManager,
    RedeemItemClothingComposer,
    RoomObjectCategory,
    UserFigureComposer
} from '@octane/renderer';
import { FC, useEffect, useState } from 'react';
import { BuildPurchasableClothingFigure, GetFurnitureDataForRoomObject, LocalizeText, SendMessageComposer } from '../../../../../api';
import { Button, Column, LayoutAvatarImageView, OctaneCardContentView, OctaneCardHeaderView, OctaneCardView, Text } from '../../../../../common';
import { NativeTextTree } from '../../../../../common/native-text/NativeTextTree';
import { useRoom } from '../../../../../hooks';

interface PurchasableClothingConfirmViewProps {
    objectId: number;
    onClose: () => void;
}

const MODE_DEFAULT: number = -1;
const MODE_PURCHASABLE_CLOTHING: number = 0;

export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewProps> = (props) => {
    const { objectId = -1, onClose = null } = props;
    const [mode, setMode] = useState(MODE_DEFAULT);
    const [gender, setGender] = useState<string>(AvatarFigurePartType.MALE);
    const [newFigure, setNewFigure] = useState<string>(null);
    const { roomSession = null } = useRoom();

    const useProduct = () => {
        SendMessageComposer(new RedeemItemClothingComposer(objectId));
        SendMessageComposer(new UserFigureComposer(gender, newFigure));

        onClose();
    };

    useEffect(() => {
        let mode = MODE_DEFAULT;

        const figure = GetSessionDataManager().figure;
        const gender = GetSessionDataManager().gender;
        const validSets: number[] = [];

        if (roomSession && objectId >= 0) {
            const furniData = GetFurnitureDataForRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);

            if (furniData && furniData.customParams && furniData.customParams.length) {
                const setIds = furniData.customParams
                    .split(',')
                    .map((part) => parseInt(part))
                    .filter((id) => !isNaN(id));

                for (const setId of setIds) {
                    if (GetAvatarRenderManager().isValidFigureSetForGender(setId, gender)) validSets.push(setId);
                }

                if (validSets.length) mode = MODE_PURCHASABLE_CLOTHING;
            }
        }

        if (mode === MODE_DEFAULT) {
            onClose();

            return;
        }

        setGender(gender);
        setNewFigure(BuildPurchasableClothingFigure(figure, validSets));

        // if owns clothing, change to it

        setMode(mode);
    }, [roomSession, objectId, onClose]);

    if (mode === MODE_DEFAULT) return null;

    return (
        <NativeTextTree>
            <OctaneCardView className="octane-use-product-confirmation">
                <OctaneCardHeaderView headerText={LocalizeText('useproduct.widget.title.bind_clothing')} onCloseClick={onClose} />
                <OctaneCardContentView center>
                    <div className="flex overflow-hidden gap-2">
                        <div className="flex flex-col">
                            <div className="mannequin-preview">
                                <LayoutAvatarImageView direction={2} figure={newFigure} />
                            </div>
                        </div>
                        <div className="flex flex-col justify-between overflow-auto">
                            <Column gap={2}>
                                <Text>{LocalizeText('useproduct.widget.text.bind_clothing')}</Text>
                                <Text>{LocalizeText('useproduct.widget.info.bind_clothing')}</Text>
                            </Column>
                            <div className="flex items-center justify-between">
                                <Button variant="danger" onClick={onClose}>
                                    {LocalizeText('useproduct.widget.cancel')}
                                </Button>
                                <Button variant="success" onClick={useProduct}>
                                    {LocalizeText('useproduct.widget.bind_clothing')}
                                </Button>
                            </div>
                        </div>
                    </div>
                </OctaneCardContentView>
            </OctaneCardView>
        </NativeTextTree>
    );
};