import React from 'react';

import { G, Link, Path, Svg, Text, View } from '@react-pdf/renderer';

import { PDF_BRAND_LABEL, pdfColors, pdfStyles } from './PdfStyles';

type PdfHeaderProps = {
  title: string;
  subtitle?: string | null;
  meta?: string | null;
  url?: string;
};

const PdfHeader: React.FC<PdfHeaderProps> = ({
  title,
  subtitle,
  meta,
  url = 'https://azopus.hu',
}) => (
  <View style={pdfStyles.header}>
    <View style={pdfStyles.headerContent}>
      <Text style={pdfStyles.headerTitle}>{title}</Text>

      {subtitle && <Text style={pdfStyles.headerSubtitle}>{subtitle}</Text>}
    </View>

    <View style={pdfStyles.headerRight}>
      <Link src={url}>
        <AzopusPdfLogo />
      </Link>

      <Link src={url}>
        <Text style={pdfStyles.headerSite}>{PDF_BRAND_LABEL}</Text>
      </Link>

      {meta && <Text style={pdfStyles.headerMeta}>{meta}</Text>}
    </View>
  </View>
);

const AzopusPdfLogo = () => (
  <Svg
    width={80}
    height={18}
    viewBox="0 0 410.5 82"
    preserveAspectRatio="xMaxYMid meet"
    style={pdfStyles.headerLogo}
  >
    <G fill={pdfColors.logo}>
      <Path d="M179.7,4.2h32.5c19,0,31.3,9.8,31.3,26.5v0.2c0,17.9-13.7,27.3-32.4,27.3h-10.5l-21,21.6L179.7,4.2L179.7,4.2z" />
      <Path d="M343.8,68.6l12.8-13.1c7.6,5.9-9.2-12.7-9.2-28.2v-0.2c0-14,11.1-24.2,29.3-24.2c12.9,0,25.5,4.5,33.7,11.1l-13.1,13.7c-6.9-5,12.5,14.4,12.5,28.5v0.2c0,15.4-12.2,24.6-30.6,24.6C365.9,81.1,353.2,76.9,343.8,68.6" />
      <Path d="M306.8,25.7V4.2h-48.3v42.4c0,23.7,13.5,34.6,34.9,34.6c21.5,0,35.4-10.8,35.4-35.1V4.2h-1.2L306.8,25.7z" />
      <Path d="M87.9,42.8V43c0,21.2,16.3,38.2,38.3,38.2s38.5-17.2,38.5-38.4v-0.2v-38c0,0-27.7-0.2-38.3-0.2C104.4,4.4,87.9,21.6,87.9,42.8" />
      <Path d="M71.9,33.2H59.8c-0.3,0-0.4-0.1-0.2-0.4L72,14.2c0.2-0.4,0.3-0.7,0.3-1.1v-8c0-0.5-0.4-0.9-0.9-0.9h-29c-0.7,0-1,0.4-0.7,1.1l5,7.8c0.4,0.5,0.6,0.7,1.1,0.7H54l0,0h5c0.3,0,0.4,0.2,0.2,0.5l-5.9,9.3L41.6,41.7c0,0,0,0,0,0.1v0.1l0,0c-0.2,0.5,0.1,0.9,0.7,0.9h0.2h9.9h19.5c0.5,0,0.9-0.4,0.9-0.9v-7.8C72.8,33.5,72.4,33.2,71.9,33.2" />
      <Path d="M15,35.4c-2.5,0-4.3-1.4-4.3-4c0-3,2.3-4.6,5.8-4.6h4.2c0.2,0,0.4,0.1,0.4,0.4v3.1C21.1,33.5,18.2,35.4,15,35.4 M16.1,3.9C7.6,3.9,1.4,8.6,0.9,15.4c-0.1,0.5,0.3,0.8,0.8,0.8l9,0.5c0.5,0,0.9-0.2,1-0.7c0.4-1.9,2.1-3.1,4.4-3.1c3.1,0,4.9,1.9,4.9,4.9v1.7c0,0.2-0.1,0.4-0.4,0.4h-5.5C5.9,19.9,0,23.3,0,32.1C0,41,6,43.4,11.7,43.4c3.9,0,6.9-1.2,8.9-3.6c0.2-0.3,0.4-0.1,0.4,0.1v2c0,0.5,0.4,0.9,0.9,0.9h8.7c0.5,0,0.9-0.4,0.9-0.9V16.5C31.5,9.2,25.2,3.9,16.1,3.9" />
    </G>
    <G fill={pdfColors.gold}>
      <Path d="M37,46.7h0.4c0.7,0,1.2-0.3,1.6-0.8l13.8-21.6c0.4-0.5,0.4-1.3,0-1.9L39,0.8C38.6,0.3,38.1,0,37.4,0H37c-1.1,0-1.5,0.8-0.9,1.6L49.3,23c0.1,0.3,0.1,0.5,0,0.8L36,45.1C35.5,45.9,35.9,46.7,37,46.7" />
      <Path d="M22,46.7h0.4c0.7,0,1.2-0.3,1.6-0.8l13.8-21.6c0.4-0.5,0.4-1.3,0-1.9L24,0.8C23.6,0.3,23.1,0,22.4,0H22c-1.1,0-1.5,0.8-0.9,1.6L34.4,23c0.1,0.3,0.1,0.5,0,0.8L21.1,45.1C20.6,45.9,21,46.7,22,46.7" />
      <Path d="M29.5,46.7h0.4c0.7,0,1.2-0.3,1.6-0.8l13.8-21.6c0.4-0.5,0.4-1.3,0-1.9L31.5,0.8c-0.4-0.5-1-0.8-1.6-0.8h-0.4c-1.1,0-1.5,0.8-0.9,1.6L41.8,23c0.1,0.3,0.1,0.5,0,0.8L28.5,45.1C28,45.9,28.4,46.7,29.5,46.7" />
    </G>
  </Svg>
);

export default PdfHeader;