import {
    Avatar,
    Dropdown,
    Label,
    Separator,
    SearchField,
    RangeCalendar,
    Button,
    Popover,
    PopoverDialog, PopoverArrow
} from "@heroui/react";
import {Calendar} from "@gravity-ui/icons";
import { useState } from "react";
import { WeekStrip } from "./WeekStrip";
import { FriendsNotes } from "./FriendsNotes";
import { DayView } from "./DayView";
import './journal.css'

export function Journal() {
    const [selectedDate, setSelectedDate] = useState(new Date());

    return (
        <div className="p-8">
            <Dropdown>
                <Dropdown.Trigger aria-label="Open user menu" className="group flex items-center gap-3 cursor-pointer rounded-lg p-2 hover:bg-white/5">
                    <Avatar color="accent" className="rounded-lg">
                        <Avatar.Fallback className="rounded-lg">LR</Avatar.Fallback>
                    </Avatar>
                    <span className="flex flex-col">
                        <span className="text-sm font-bold text-[var(--text-h)]">Lena Rain</span>
                        <span className="text-xs text-[var(--text)]">Private journal</span>
                    </span>
                    <svg
                        className="ml-2 size-4 text-[var(--text)] transition-transform duration-200 group-aria-[expanded=true]:rotate-180"
                        fill="none"
                        stroke="currentColor"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                    >
                        <path d="M6 9l6 6 6-6" />
                    </svg>
                </Dropdown.Trigger>
                <Dropdown.Popover className="bg-[var(--card-background)] rounded-xl">
                    <Dropdown.Menu
                        className="p-1"
                        onAction={(key) => console.log(key)}
                    >
                        <Dropdown.Item id="profile" textValue="Profile" className="rounded-lg text-[var(--text-h)]">
                            <Label className="font-medium text-white/90">Profile</Label>
                        </Dropdown.Item>
                        <Dropdown.Item id="settings" textValue="Settings" className="rounded-lg text-[var(--text-h)]">
                            <Label className="font-medium text-white/90">Settings</Label>
                        </Dropdown.Item>
                        <Separator className="bg-[var(--border-color)]" />
                        <Dropdown.Item id="logout" textValue="Log out" variant="danger" className="rounded-lg">
                            <Label>Log out</Label>
                        </Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown.Popover>
            </Dropdown>
            <div className="container z-10 p-7 mx-auto flex flex-1 items-center justify-center gap-4">
                <SearchField name="search" aria-label="Search for entries">
                    <SearchField.Group>
                        <SearchField.SearchIcon />
                        <SearchField.Input className="w-[280px]" placeholder="Search entries..." />
                        <SearchField.ClearButton />
                    </SearchField.Group>
                </SearchField>
                <div>
                    <Popover>
                        <Button variant="secondary">
                            <Calendar />
                            <span>Pick date range</span>
                        </Button>
                        <Popover.Content className="max-w-72" offset={10}>
                            <PopoverDialog aria-label="Date range picker">
                                <PopoverArrow />
                                <RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon">
                                    <RangeCalendar.Header>
                                        <RangeCalendar.Heading />
                                        <RangeCalendar.NavButton slot="previous" />
                                        <RangeCalendar.NavButton slot="next" />
                                    </RangeCalendar.Header>
                                    <RangeCalendar.Grid>
                                        <RangeCalendar.GridHeader>
                                            {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}
                                        </RangeCalendar.GridHeader>
                                        <RangeCalendar.GridBody>
                                            {(date) => <RangeCalendar.Cell date={date} />}
                                        </RangeCalendar.GridBody>
                                    </RangeCalendar.Grid>
                                </RangeCalendar>
                            </PopoverDialog>
                        </Popover.Content>
                    </Popover>
                </div>
            </div>
            <div className="mx-auto max-w-3xl px-4">
                <WeekStrip
                    selectedDate={selectedDate}
                    onDateChange={setSelectedDate}
                />
            </div>
            <div className="mx-auto mt-4 flex max-w-3xl gap-4 px-4">
                <FriendsNotes />
                <DayView selectedDate={selectedDate} />
            </div>
        </div>
    );
}

export default Journal;