import { DesktopViewEvent, GetSessionDataManager } from '@octane/renderer';
import { FC, useState } from 'react';
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
import { Flex, Text } from '../../../../common';
import { useMessageEvent, useRoomPromote } from '../../../../hooks';
import { RoomPromoteEditWidgetView, RoomPromoteMyOwnEventWidgetView, RoomPromoteOtherEventWidgetView } from './views';
import { BaseButton } from '../../../../common/BaseButton';
import { NativeTextTree } from '../../../../common/native-text/NativeTextTree';

export const RoomPromotesWidgetView: FC<{}> = (props) => {
    const [isEditingPromote, setIsEditingPromote] = useState<boolean>(false);
    const [isOpen, setIsOpen] = useState<boolean>(true);
    const { promoteInformation, setPromoteInformation } = useRoomPromote();

    useMessageEvent<DesktopViewEvent>(DesktopViewEvent, (event) => {
        setPromoteInformation(null);
    });

    if (!promoteInformation) return null;

    return (
        <NativeTextTree>
            <>
                {promoteInformation.data.adId !== -1 && (
                    <div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] text-sm  bg-[#1c1c20f2] rounded">
                        <div className="flex flex-col">
                            <Flex component={BaseButton} type="button" pointer alignItems="center" justifyContent="between" onClick={(event) => setIsOpen((value) => !value)}>
                                <Text overflow="hidden" variant="white">
                                    {promoteInformation.data.eventName}
                                </Text>
                                {isOpen && <FaChevronUp className="fa-icon" />}
                                {!isOpen && <FaChevronDown className="fa-icon" />}
                            </Flex>
                            {isOpen && GetSessionDataManager().userId !== promoteInformation.data.ownerAvatarId && (
                                <RoomPromoteOtherEventWidgetView eventDescription={promoteInformation.data.eventDescription} />
                            )}
                            {isOpen && GetSessionDataManager().userId === promoteInformation.data.ownerAvatarId && (
                                <RoomPromoteMyOwnEventWidgetView
                                    eventDescription={promoteInformation.data.eventDescription}
                                    setIsEditingPromote={() => setIsEditingPromote(true)}
                                />
                            )}
                            {isEditingPromote && (
                                <RoomPromoteEditWidgetView
                                    eventDescription={promoteInformation.data.eventDescription}
                                    eventId={promoteInformation.data.adId}
                                    eventName={promoteInformation.data.eventName}
                                    setIsEditingPromote={() => setIsEditingPromote(false)}
                                />
                            )}
                        </div>
                    </div>
                )}
            </>
        </NativeTextTree>
    );
};