import { useUserSelector } from '@/store/userStore';
import { Avatar } from 'antd';
import Title from 'antd/es/typography/Title';
import { useState } from 'react';
import ContentDrawer from './ContentDrawer';
import UserEdit from './UserEdit';

interface HeaderProps {
  title: string;
  additionalContent?: React.ReactNode;
}

export default function Header({ title, additionalContent }: HeaderProps) {
  const [openEdit, setOpenEdit] = useState(false);

  const showEditDrawer = () => setOpenEdit(true);
  const closeEditDrawer = () => {
    setOpenEdit(false);
  };
  const user = useUserSelector();
  return (
    <div
      style={{
        height: '72px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <Title style={{ marginLeft: '16px' }} level={3}>
        {title}
      </Title>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '24px',
          marginRight: '26px',
        }}
      >
        {additionalContent}
        <img
          src="./icons/header/more.svg"
          alt="more"
          style={{ height: '16px', width: '16px' }}
        />
        <div
          style={{
            borderRadius: '50%',
            border: '2px solid #8BC34A',
            height: '32px',
            width: '32px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          onClick={showEditDrawer}
        >
          <Avatar
            size={25.77}
            src={`https://gamma.heado.ru/go/ava?name=${user?.login}`}
          />
        </div>
      </div>
      <ContentDrawer
        login={user?.login}
        name={user?.name}
        email={user?.email}
        open={openEdit}
        closeDrawer={closeEditDrawer}
        type="edit"
      >
        {user?.id && <UserEdit closeDrawer={closeEditDrawer} userId={user?.id} />}
      </ContentDrawer>
    </div>
  );
}