import { FC } from 'react';

import styles from './Profile.module.scss';

interface ProfileProps {
  type: 'F' | 'PAX';
  isER: boolean;
  upper1: string;
  upper1max?: string;
  upper2: string;
  upper2max?: string;
  upper3: string;
  upper3max?: string;
  upper4: string;
  upper4max?: string;
  lower1: string;
  lower2: string;
  OEW: string;
  crew: string;
  CGs: [string, boolean, string, boolean];
  unit: string;
  inPreview: boolean;
  done: boolean;
}

const Profile: FC<ProfileProps> = ({
  type,
  isER,
  upper1,
  upper1max,
  upper2,
  upper2max,
  upper3,
  upper3max,
  upper4,
  upper4max,
  lower1,
  lower2,
  OEW,
  crew,
  CGs,
  unit,
  inPreview,
  done,
}) => {
  const previewClass = inPreview ? styles['fill-neutral-500'] : undefined;
  const doneClass = done ? undefined : styles['fill-neutral-500'];
  const ZFWCGClass = CGs[1] ? styles['fill-red-500'] : doneClass;
  const TOCGClass = CGs[3] ? styles['fill-red-500'] : doneClass;

  return (
    <svg viewBox="0 0 4002 780" version="1.1" xmlns="http://www.w3.org/2000/svg" className="mb-4">
      <path
        style={{
          fill: 'none',
          strokeWidth: 4,
          strokeLinecap: 'butt',
          strokeLinejoin: 'miter',
        }}
        className={styles['stroke-zinc-600']}
        d="m 1748.2487,624.45529 v 83.5816 z m 653.1368,98.40409 v 43.08593 z"
        transform="matrix(1.0068517,0,0,1.0069072,-24.265193,-12.003831)"
      />
      <path
        style={{
          fill: 'none',
          stroke: 'white',
          strokeWidth: 4,
          strokeLinecap: 'butt',
          strokeLinejoin: 'round',
        }}
        d="m 119.50997,573.71703 h 128.0729 v 29.07865 h 119.1481 M 1922.9882,624.6584 V 378.08519 Z M 1143.9838,378.54476 v 246.57126 z m 1556.0004,1.0854 3e-4,245.70686 0.01,-245.70686 z M 119.47872,507.3493 V 686.42638 Z M 681.8277,784.08016 C 550.68986,778.56008 459.37243,767.83734 325.24777,742.2102 247.12441,727.28325 163.85922,704.53832 115.68874,684.96689 65.272866,664.48337 30.640554,635.98924 26.748642,611.79065 c -3.768329,-23.42962 7.455828,-38.32595 50.49813,-67.01953 6.041298,-4.02691 12.708263,-9.27073 14.816577,-11.65295 2.108023,-2.3822 4.524361,-4.48001 4.524361,-4.48001 0,0 45.05507,-44.22564 69.74451,-58.59581 72.48275,-42.18783 238.75927,-76.44031 425.63149,-87.67895 14.00372,-0.84197 33.99829,-2.07064 44.43261,-2.72959 26.21726,-1.65646 1973.24248,-2.45294 2062.36198,-0.84445 156.7316,2.82998 269.5005,7.74134 530.5511,23.10724 47.1495,2.7752 85.8534,4.90642 86.012,4.73564 0.6463,-0.69433 3.18,-46.35302 2.6116,-47.00235 -0.3392,-0.38606 -8.4798,-1.63074 -18.0917,-2.7653 -35.3422,-4.17401 -67.399,-11.82474 -77.0779,-18.39697 -3.9158,-2.65808 -3.9645,-3.95085 -1.9416,-51.11949 2.108,-49.16104 3.1187,-81.48815 3.1285,-100.00521 0,-21.77363 -0.1657,-21.37816 11.1206,-24.94772 37.4058,-11.83133 117.8811,-11.06942 171.1122,1.62031 15.227,3.62986 19.589,3.51496 35.5372,-0.93615 21.7001,-6.05753 21.0601,-5.51568 96.6373,-82.052719 33.1386,-33.558758 68.757,-66.037569 68.757,-66.037569 0,0 83.3796,-1.079949 169.2388,-1.079949 136.9782,0 171.6165,0.253341 171.2179,1.25017 -4.4107,11.004128 -56.5812,125.499597 -58.6917,128.808777 -4.6101,7.22481 -3.2139,7.88313 16.7587,7.90201 9.0622,0.008 22.5343,1.10293 37.2289,3.0234 4.1187,0.5386 15.3536,1.65343 24.9606,2.47749 9.6122,0.82422 19.8325,1.75756 22.7175,2.07418 5.0681,0.55713 9.0514,198.40717 3.9934,198.38178 -3.6049,-0.0227 -31.7008,3.23584 -34.6991,4.01865 -1.9198,0.50162 -6.9752,1.19264 -11.2312,1.53478 -7.7386,0.62215 -7.7386,0.62215 -7.7386,8.4184 0,8.93284 0.045,8.97847 9.985,9.03089 7.595,0.034 9.8124,1.63453 3.4137,2.45321 -2.7018,0.34575 -6.0356,0.83238 -7.4075,1.08266 -1.3721,0.25018 -13.4624,0.89408 -26.8658,1.43238 -13.4009,0.53851 -28.9024,1.4418 -34.4462,2.00812 -15.6072,1.59497 -41.7208,3.01042 -55.6346,3.01554 -20.6343,0.008 -19.0304,-1.48851 -18.6619,17.4164 0.3714,19.01843 2.3134,23.86211 11.5516,28.7958 5.5848,2.98376 0.3035,2.54795 88.3399,7.28999 84.7141,4.56302 75.158,-2.81091 75.158,57.97778 0,54.09028 0.038,53.96894 -18.7912,59.84504 -20.4081,6.36957 -118.4497,34.30825 -182.9044,52.12181 -74.4105,20.56545 -152.6321,42.51798 -160.2541,44.9738 -10.5871,3.41069 -57.1162,16.38817 -105.4333,29.40502 -184.6228,49.73829 -402.0471,89.78228 -516.1218,95.05681 -19.1654,0.88577 -2300.07154,1.25614 -2320.9699,0.37695 z m 1714.3911,-15.93638 c 14.3101,-1.72862 35.0046,-5.59211 45.932,-8.57466 47.3734,-12.93067 34.3571,-20.57346 -70.3941,-41.33854 -9.3343,-1.85054 -21.9156,-4.53045 -27.9568,-5.955 -119.2244,-28.11802 -135.9358,-31.16723 -227.3866,-41.48667 -32.4779,-3.66487 -84.0049,-11.3955 -126.5748,-18.9901 -77.6003,-13.84405 -129.5471,-21.9553 -156.762,-24.47858 -178.2016,-16.52165 -260.2497,38.68714 -109.1224,73.42801 7.2586,1.66798 18.9422,5.29576 25.9629,8.06195 39.3007,15.48166 111.0211,26.35086 233.4296,35.37682 97.5092,7.1897 247.1876,10.13705 247.9345,4.88196 0.6641,-4.66361 1.511,-4.79998 36.7154,-5.88569 22.9808,-0.70847 26.3783,-0.21481 26.3783,3.83836 0,2.5877 2.9594,14.02473 3.8762,14.97665 0.4007,0.41452 15.6685,2.27843 33.9288,4.14116 18.264,1.86268 33.4272,3.60903 33.698,3.88056 0.7657,0.76635 16.5438,-0.20912 30.341,-1.87623 z m -2029.36746,-359.3222 -0.0248,215.97654 1275.64716,-4.1e-4 h 1275.1949 l 132.9522,-2.46652 132.952,-2.4665 147.9241,-11.4452 147.9243,-11.4452 1.0236,-90.88061 1.0235,-90.88061 -83.3015,-4.35422 -83.3014,-4.35424 m -2614.52231,217.81122 -5e-5,159.11801 z M 1748.1434,708.5565 v 75.45385 z m 1663.0399,-106.30033 -1e-4,113.31756 z m -1009.9445,22.54108 v 99.39317 z m -4e-4,143.38207 v 15.78331 z"
        transform="matrix(1.0068517,0,0,1.0069072,-24.265193,-12.003831)"
      />

      <text style={{ fill: 'white', fontSize: '160px' }} x="725.61609" y="591.34473" textAnchor="middle">
        <tspan className={previewClass}>{upper1}</tspan>
        {upper1max && <tspan>/{upper1max}</tspan>}
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="1509.024" y="591.34473" textAnchor="middle">
        <tspan className={previewClass}>{upper2}</tspan>
        {upper2max && <tspan>/{upper2max}</tspan>}
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="2292.3511" y="591.34473" textAnchor="middle">
        <tspan className={previewClass}>{upper3}</tspan>
        {upper3max && <tspan>/{upper3max}</tspan>}
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="3075.8955" y="591.34473" textAnchor="middle">
        <tspan className={previewClass}>{upper4}</tspan>
        {upper4max && <tspan>/{upper4max}</tspan>}
      </text>

      <text style={{ fill: 'white', fontSize: '160px' }} x="1197.6641" y="754.35504" textAnchor="middle">
        <tspan className={previewClass}>{lower1}</tspan>
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="2891.1475" y="754.35504" textAnchor="middle">
        <tspan className={previewClass}>{lower2}</tspan>
      </text>

      <text style={{ fill: 'white', fontSize: '160px' }} x="0" y="280.10175">
        {type === 'F' ? 'Pilots:' : 'Pilots & FAs:'}
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="1476.2501" y="280.10175" textAnchor="end">
        <tspan className={previewClass}>{crew}</tspan>
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="0" y="130.625">
        OEW:
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="1476.2501" y="130.625" textAnchor="end">
        {OEW}
      </text>

      <text style={{ fill: 'white', fontSize: '100px' }} x="4002" y="778.24402" textAnchor="end">
        <tspan style={{ fontSize: '70px' }}>all in </tspan>
        <tspan>{unit}</tspan>
      </text>

      <text style={{ fill: 'white', fontSize: '160px' }} x="1730.4194" y="142.15625">
        TOCG:
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="2540.771" y="142.15625">
        <tspan className={TOCGClass}>{CGs[2]}</tspan>
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="1730.4194" y="288.875">
        ZFWCG:
      </text>
      <text style={{ fill: 'white', fontSize: '160px' }} x="2540.771" y="288.875">
        <tspan className={ZFWCGClass}>{CGs[0]}</tspan>
      </text>

      <path
        style={{
          fill: 'none',
          stroke: 'white',
          strokeWidth: 8,
          strokeLinecap: 'butt',
          strokeLinejoin: 'round',
          opacity: isER ? 1 : 0,
        }}
        d="m 3616.1269,203.67131 -115.4682,116.32951 h 76.6132 l 13.6484,-13.75016 h -61.1499 l 42.8836,-43.20365 h 61.1499 l 13.6485,-13.75016 h -61.1499 l 31.6393,-31.87538 h 61.1499 l 13.6484,-13.75016 z m 101.1357,0 -115.4682,116.32951 h 15.4631 l 45.9082,-46.25055 h 21.7891 l -7.0158,46.25055 h 20.0709 l 6.7491,-50.85999 c 10.2365,-2.8646 20.2552,-7.10948 30.0559,-12.73452 9.8522,-5.67714 18.9402,-12.70852 27.2636,-21.09401 6.1521,-6.19797 10.0211,-11.30222 11.6068,-15.31268 1.6896,-4.06255 1.7441,-7.42197 0.1635,-10.07824 -1.4223,-2.34378 -4.0367,-3.95839 -7.8438,-4.84382 -3.7552,-0.93749 -9.1472,-1.40626 -16.176,-1.40625 z m 2.2801,13.2814 h 18.1967 c 4.165,0 7.4735,0.31252 9.9248,0.93751 2.5032,0.57292 4.1244,1.61462 4.8641,3.12503 0.9495,1.77087 0.7045,3.9584 -0.735,6.56258 -1.3356,2.55212 -3.6579,5.49487 -6.9666,8.82824 -4.3426,4.37505 -8.5084,7.9949 -12.4972,10.8595 -3.8849,2.81253 -8.0847,5.31258 -12.5989,7.50009 -4.8776,2.34378 -9.5781,3.95838 -14.1015,4.84381 -4.4716,0.83333 -9.1546,1.25002 -14.0487,1.25002 h -15.6194 z"
      />
    </svg>
  );
};

export default Profile;