import React from "react";
import SortableTable from "./SortableTable";
import {THeader} from "./SortableTable";
import {CFlight} from '../classes/CFlight';

function Link2Flight(key: string, row: any, data: string | null)
{
  var val: JSX.Element = <></>;
  const link: string = 'https://de.dhv-xc.de/flight/' + row['IDFlight'];
  val = <td><a href={link} target="_blank" rel="noopener noreferrer" >{data}</a></td>;

  return val;
}

function Meter2Km(key: string, row: any, data: string | null)
{
  var val: JSX.Element = <></>;
  const numdata: number = +data! / 1000;
  val = <td>{numdata}</td>;

  return val;
}

export default function FlightsTable({flightdata}: {flightdata: CFlight[]}) 
{
  const headers: THeader[] = [
    { key: "IDFlight", label: "ID", visible: false },
    { key: "FlightDate", label: "Datum", callback: Link2Flight },
    { key: "TakeoffWaypointName", label: "Start" },
    { key: "Glider", label: "Gleitschirm" },
    { key: "BestTaskDistance", label: "Strecke", callback: Meter2Km },
    { key: "BestTaskType", label: "Streckentyp" },
    { key: "BestTaskPoints", label: "Punkte" },
    { key: "FlightDurationDispl", label: "Dauer" }
  ];

  return(
<div className='App'>
  <SortableTable<CFlight> headers={headers} dataTbl={flightdata} ></SortableTable>
</div>
  );
}