import { Button, Flex, Layout, Popconfirm, Tooltip, Typography } from 'antd';
import { ReactNode, useState } from 'react';
import { Content, Header } from 'antd/es/layout/layout';
import { API_URL, handleLogout, IconWrapper } from '@pos/base';
import { FaUser } from 'react-icons/fa';
import axios from 'axios';

interface AdminLayoutProps {
  children: ReactNode;
}

export default function AdminLayout(props: AdminLayoutProps) {
  const { children } = props;
  const [loadingLogout, setLoadingLogout] = useState(false);

  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>
            <div style={{ fontWeight: 800, fontSize: 16 }}>LAPORAN</div>
          </Flex>
          <Flex style={{ marginLeft: 'auto' }}>
            <Popconfirm
              title="Are you sure want to logout?"
              placement="bottomRight"
              onConfirm={() => handleClickLogout()}
            >
              <Tooltip title="Logout" placement="bottom">
                <FaUser style={{ fontSize: 16 }} />
              </Tooltip>
            </Popconfirm>
          </Flex>
        </Flex>
      </Header>
      <Content style={{ overflow: 'initial', background: '#fff', padding: 10 }}>{children}</Content>
    </Layout>
  );
}