export const tournamentColumns = [
  tournamentColumnHelper.display({
    id: 'favorite',
    header: (info) => (
      <TableHeader
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      ></TableHeader>
    ),
    cell: (info) => (
      <TableCell className="align-top">
        <button onClick={() => favoriteTournament(info.cell.row.original)}>
          <StarIcon className="h-5 w-5 text-primary/80 hover:scale-105 hover:text-primary" />
        </button>
      </TableCell>
    ),
  }),
  tournamentColumnHelper.accessor('start_at', {
    header: (info) => (
      <TableHeader
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      >
        Start
      </TableHeader>
    ),
    cell: (info) => (
      <TableCell className="whitespace-normal">
        {format(new Date(info.cell.getValue()), 'E.	dd.MM.yy HH:mm')}
      </TableCell>
    ),
  }),
  tournamentColumnHelper.accessor('events.name', {
    header: (info) => (
      <TableHeader
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      >
        Event
      </TableHeader>
    ),
    cell: (info) => <TableCell className="whitespace-normal">{info.cell.getValue()}</TableCell>,
  }),
  tournamentColumnHelper.accessor('name', {
    header: (info) => (
      <TableHeader
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      >
        Name
      </TableHeader>
    ),
    cell: (info) => (
      <TableCell className="whitespace-normal hover:underline">
        <a target={'_blank'} rel="noopener noreferrer" href={info.cell.row.original.events.url}>
          {info.cell.getValue()}
        </a>
      </TableCell>
    ),
  }),
  tournamentColumnHelper.accessor('buy_in', {
    header: (info) => (
      <TableHeader
        className="text-right"
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      >
        Buy-In
      </TableHeader>
    ),
    cell: (info) => (
      <TableCell className="text-right">
        {info.cell.getValue() === null
          ? ''
          : currencyFormatter({
              amount: info.cell.getValue(),
              currency: info.cell.row.original.buy_in_currency?.symbol || 'EUR',
            })}
      </TableCell>
    ),
  }),
  tournamentColumnHelper.accessor('guarantee', {
    header: (info) => (
      <TableHeader
        className="text-right"
        isSorted={info.header.column.getIsSorted()}
        getToggleSortingHandler={info.header.column.getToggleSortingHandler()}
      >
        Guarantee
      </TableHeader>
    ),
    cell: (info) => (
      <TableCell className="text-right">
        {info.cell.getValue() === null
          ? ''
          : currencyFormatter({
              amount: info.cell.getValue(),
              currency: info.cell.row.original.guarantee_currency.symbol || 'EUR',
            })}
      </TableCell>
    ),
  }),
  tournamentColumnHelper.display({
    id: 'mobile',
    header: (info) => <TableHeader type={'mobile'}>Tournaments</TableHeader>,
    cell: (info) => (
      <TableCell type={'mobile'}>
        <div className="flex flex-row justify-between p-4">
          <div>
            <div className="flex flex-row space-x-4 text-xs text-base-content/80">
              <div className="flex items-center">
                <CalendarDaysIcon
                  className="mr-1 h-4 w-5 text-base-content/60"
                  aria-hidden="true"
                />
                {format(new Date(info.cell.row.original.start_at), 'E.	dd.MM.yy HH:mm')}
              </div>
            </div>
            <div className="py-2 text-sm text-base-content">{info.cell.row.original.name}</div>

            <div className="text-primary">
              <div className="flex flex-col space-y-1">
                <div className="flex items-center">
                  {info.cell.row.original.buy_in === null ? (
                    <></>
                  ) : (
                    <>
                      <BanknotesIcon
                        className="mr-2 h-4 w-4 text-primary-focus"
                        aria-hidden="true"
                      />
                      <span className="text-xl font-bold text-primary">
                        {currencyFormatter({
                          amount: info.cell.row.original.buy_in,
                          currency: info.cell.row.original.buy_in_currency?.symbol || 'EUR',
                          minimumFractionDigits: 0,
                        })}
                      </span>
                    </>
                  )}
                </div>
                <div className="flex items-center">
                  {info.cell.row.original.guarantee === null ? (
                    <></>
                  ) : (
                    <>
                      <TrophyIcon className="mr-2 h-4 w-4 text-primary-focus" aria-hidden="true" />
                      <span className="text-xl font-bold text-primary">
                        {currencyFormatter({
                          amount: info.cell.row.original.guarantee,
                          currency: info.cell.row.original.guarantee_currency?.symbol || 'EUR',
                          minimumFractionDigits: 0,
                        })}
                      </span>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
          <div className="pr-2">
            <button onClick={() => favoriteTournament(info.cell.row.original)}>
              <StarIcon className="h-6 w-6 text-primary" aria-hidden="true" />
            </button>
          </div>
        </div>
      </TableCell>
    ),
  }),
]