import _map from 'lodash/map'
import moment from 'moment-timezone'
import React from 'react'

const EventInfoItem = ({ image, name }: EventInfoTypes) => (
  <div className="event-info">
    <img src={image} alt="event" />
    {name}
  </div>
)

const tableConfig = (columns?: IColumnData[], key?: string) => {
  let config

  if (columns?.length) {
    return {
      header: _map(columns, item => item.label),
      body: _map(columns, item => {
        if (item.component) {
          const ItemComponent = item.component
          return (row: RowItems) => ({
            columnProps: item,
            component: <ItemComponent {...row} />,
          })
        }

        if (item.key === 'event') {
          return (row: RowItems) => ({
            columnProps: item,
            component: <EventInfoItem image={row.image} name={row.eventName} />,
          })
        }

        if (item.key === 'total') {
          return (row: RowItems) => ({
            columnProps: item,
            component: row.currency + row.amount,
          })
        }

        return (row: RowItems) => ({
          columnProps: item,
          component: item.normalizer
            ? item.normalizer(row[item.key as keyof RowItems])
            : row[item.key as keyof RowItems],
        })
      }) as ITableBodyType[],
    }
  }

  switch (key) {
    default:
      config = {
        header: ['Order No.', 'Date', 'Event', 'Total'],
        body: [
          (row: RowItems) => ({
            columnProps: {} as IColumnData,
            component: row.id,
          }),
          (row: RowItems) => ({
            columnProps: {} as IColumnData,
            component: row.timezone
              ? moment.tz(row.date, row.timezone).format('DD MMMM YYYY')
              : row.date,
          }),
          (row: RowItems) => ({
            columnProps: {} as IColumnData,
            component: <EventInfoItem image={row.image} name={row.eventName} />,
          }),
          (row: RowItems) => ({
            columnProps: {} as IColumnData,
            component: row.currency + row.amount,
          }),
        ] as ITableBodyType[],
      }
  }
  return config
}

export default tableConfig