import { Avatar, Flex, Image, Layout, Popconfirm, Tooltip } from 'antd';
import { ReactNode, useState } from 'react';
import { Content, Header } from 'antd/es/layout/layout';
import { API_URL, getInitialName, handleLogout, UserDataState } from '@pos/base';
import { FaUser } from 'react-icons/fa';
import axios from 'axios';
import Logo from '../../../base/presentation/assets/images/we-logo.png';
import { useRecoilValue } from 'recoil';

interface AdminLayoutProps {
  children: ReactNode;
}

export default function AdminLayout(props: AdminLayoutProps) {
  const { children } = props;
  const [_loadingLogout, setLoadingLogout] = useState(false);
  const user = useRecoilValue(UserDataState);
  const initialName = getInitialName(user.name);

  async function handleClickLogout() {
    setLoadingLogout(true);
    try {
      await axios({ url: `${API_URL.LOGOUT}`, method: 'delete' });
      setLoadingLogout(false);
      await handleLogout();
    } catch (err: any) {
      setLoadingLogout(false);
    }
  }

  return (
    <Layout>
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 1,
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          // background: token.colorPrimary,
          background: '#fff',
          borderBottom: '1px solid #ddd',
        }}
      >
        <Flex style={{ width: '100%' }} align="center">
          <Flex>
            <Image src={Logo} width={50} preview={false} />
            {/* <div style={{ fontWeight: 800, fontSize: 16 }}>WE POS</div> */}
          </Flex>
          <Flex style={{ marginLeft: 'auto' }}>
            <Popconfirm
              title="Are you sure want to logout?"
              placement="bottomRight"
              onConfirm={() => handleClickLogout()}
            >
              <Tooltip title="Logout" placement="bottom">
                <Avatar size={35}>
                  {initialName ? (
                    <div style={{ fontSize: 13 }}>{initialName?.toUpperCase()}</div>
                  ) : (
                    <FaUser style={{ fontSize: 14 }} />
                  )}
                </Avatar>
              </Tooltip>
            </Popconfirm>
          </Flex>
        </Flex>
      </Header>
      <Content style={{ overflow: 'initial', background: '#fff', padding: 10 }}>{children}</Content>
    </Layout>
  );
}