use crate::components::chat::*;
use crate::components::debug::*;
use leptos::prelude::*;
use thaw::*;

#[component]
pub fn Footer() -> impl IntoView {
    let chat_open = RwSignal::new(false);

    view! {
        <br />
        <br />
        <div
            class="fixed lg:static bottom-0 left-0 w-full lg:w-auto shadow-inner lg:shadow-none"
            style="background-color: var(--colorNeutralBackground4);"
        >
            <div class="overflow-hidden">
                <InlineDrawer open=chat_open position=DrawerPosition::Bottom size=DrawerSize::Small>
                    <DrawerBody>
                        <Chat />
                    </DrawerBody>
                </InlineDrawer>
            </div>
            <Divider />
            <div class="flex justify-between">
                <div>
                    <Popover
                        trigger_type=PopoverTriggerType::Click
                        position=PopoverPosition::TopStart
                    >
                        <PopoverTrigger slot>
                            <Button
                                icon=icondata::AiBugOutlined
                                appearance=ButtonAppearance::Transparent
                            />
                        </PopoverTrigger>
                        <Debug />
                    </Popover>
                </div>
                <div class="m-2">
                    <Link class="p-2" href="https://git.doordesk.net/adam/cards/" target="_blank">
                        "About"
                    </Link>
                    <Link class="p-2" href="mailto:adam@doordesk.net">
                        "Contact"
                    </Link>
                </div>
                <div>
                    <Button
                        icon=icondata::BsChatLeftText
                        appearance=ButtonAppearance::Transparent
                        on_click=move |_| {
                            chat_open.set(!chat_open());
                        }
                    />
                </div>
            </div>
        </div>
    }
}