import React, { useState, useRef, Ref } from 'react';
import styled from 'styled-components';
import { IconLogo, ContentWidth } from '../ui';
import { UserProfile, Tabs, Tab, Button, Menu, MenuItem } from '@nemo-ui/core';
import { Link, useRouter, useLink } from 'atomic-router-react';
import { routes } from '../routing';
import { PageGenerate } from '../page-generate';
import { PageHistory } from '../page-history';
import { log } from 'console';
import {useUnit} from 'effector-react';
import {logoutPressed} from '../auth'

const Wrapper = styled.div`
    width: 100%;
    height: 64px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
    margin-bottom: 24px;
    z-index:1;

    .logo {
        padding-top: 5px;
    }
    .tabs {
        align-self: end;
    }
    .right {
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
    }
`;
const Content = styled(ContentWidth)`
    display: flex;
    align-items: center;
    justify-content: space-between;
`;

export const Header: React.FC = () => {
    const [menuOpen, setMenuOpen] = useState(false);
    const userRef = useRef<null>(null);
    const logoutPressedEvent = useUnit(logoutPressed);

    return (
        <Wrapper>
            <Content>
                <div
                  className="logo"
                >
                    <IconLogo />
                </div>
                <div
                  className="tabs"
                >
                    <Tabs
                      value={
                        [PageGenerate.route, PageHistory.route].find(el => el.$isOpened.getState() ? el : undefined)
                      }
                    >
                        <Tab
                          label="Главная"
                          value={PageGenerate.route}
                          component={Link}
                          to={PageGenerate.route}
                        />
                        <Tab
                          label="История сгенерированных документов"
                          value={PageHistory.route}
                          component={Link}
                          to={PageHistory.route}
                        />
                    </Tabs>
                </div>
                <div
                  className="right"
                >
                    <Button
                      size="small"
                    >
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
                              fill="white"
                            />
                        </svg>
                        &nbsp;
                        {'Создать новый документ'}
                    </Button>
                    <div
                      className="user"
                      onClick={() => { setMenuOpen(true); }}
                    >
                        <UserProfile
                          avatarProps={{ size: 40 }}
                          reverse={'true'}
                          isOpen={menuOpen}
                          ref={userRef}
                        />
                    </div>
                    <Menu
                      open={menuOpen}
                      anchorEl={userRef.current}
                    >
                        {
                            [
                                {
                                    text: 'Выйти',
                                    props: {
                                        onClick: () => { logoutPressedEvent(); setMenuOpen(false); },
                                    }
                                }
                            ].map((el,idx) => {
                                return (
                                    <MenuItem
                                      key={idx}
                                      {...el.props}
                                    >
                                    {el.text}
                                </MenuItem>
                                )
                            })
                        }

                    </Menu>
                </div>
            </Content>
        </Wrapper>
    )
} 