import { IconArrowLeft, IconX } from '@tabler/icons-react';

import HeaderActions from '../components/HeaderActions';
import HeaderAvatar from '../components/HeaderAvatar';
import HeaderContainer from '../components/HeaderContainer';
import HeaderExtraActions from '../components/HeaderExtraActions';
import HeaderIconButton from '../components/HeaderIconButton';
import HeaderInfo from '../components/HeaderInfo';
import HeaderMainActions from '../components/HeaderMainActions';
import HeaderPill from '../components/HeaderPill';
import HeaderTitle from '../components/HeaderTitle';

import { TaskFocusSkeleton } from './TaskFocusSkeleton';
import { type TaskFocusHeaderProps } from './types';

const TaskFocusHeader = ({
  title,
  pillLabel,
  pillProps,
  mainActions = [],
  extraActions = [],
  onClose,
  onBack,
  slotProps,
  copyLinkButton,
  avatar,
  loading,
}: TaskFocusHeaderProps) => {
  if (loading) return <TaskFocusSkeleton />;

  const resolvedPillLabel = pillProps?.label || pillLabel;

  return (
    <HeaderContainer slotProps={slotProps}>
      <HeaderInfo copyLinkButton={copyLinkButton}>
        <HeaderIconButton
          Icon={IconArrowLeft}
          onClick={onBack}
        />
        <HeaderAvatar avatar={avatar} />
        <HeaderTitle
          title={title}
          slotProps={slotProps?.title}
        />
        <HeaderPill
          label={resolvedPillLabel}
          pillProps={{ ...pillProps, ...slotProps?.pill }}
        />
      </HeaderInfo>
      <HeaderActions>
        <HeaderMainActions actions={mainActions} />
        <HeaderExtraActions
          actions={extraActions}
          closeDropdownOnClick={slotProps?.extraActions?.closeDropdownOnClick}
          label={slotProps?.extraActions?.label}
        />
        <HeaderIconButton
          Icon={IconX}
          onClick={onClose}
        />
      </HeaderActions>
    </HeaderContainer>
  );
};

export type { TaskFocusHeaderProps };

export default TaskFocusHeader;