import React from 'react'

import JavascriptDisplay from '../JavascriptDisplay/JavascriptDisplay'

export const TableDocs = ({
  tableName,
  children,
}: {
  tableName: string
  children?: React.ReactNode
}): React.JSX.Element => {
  return (
    <div>
      <div className='mb-4'>
        <code>{tableName}</code> is a component that allows you to display data
        in a table format. It is a wrapper around the{' '}
        <a
          href='
              https://www.npmjs.com/package/react-sticky-table'
          target='_blank'
          className='text-blue'
        >
          react-sticky-table
        </a>{' '}
        library.
      </div>
      <br />
      <div>
        Some important notes to keep in mind while implementing the{' '}
        <code>{tableName}</code>:
      </div>
      <ul>
        <li>
          When creating the JSX for each column, we have access to the{' '}
          <code>data</code> for the column. We can get this from the{' '}
          <code>children</code> function. The argument that is passed back will
          be the <code>data</code> object for that column. You can get access to
          that by doing this:
          <JavascriptDisplay
            text={`children: (data) => {
  return (
    <div>{data.name}</div>
  )
}`}
          />
        </li>
        <li>
          To go along with the first bullet point, we also have access to the
          column this is actively being sorted on. We can use the{' '}
          <code>data</code> object to get that value. Then we must use that to
          properly style the data that we are trying to display. Here is an
          example:
          <JavascriptDisplay
            text={`children: (data) => {
  return (
    <div className={data.sortProp === 'name' ? 'font-semibold' : ''}>{data.name}</div>
  )
}`}
          />
          We want the value to have the <code>font-semibold</code> class name
          when it is actively being sorted on. We need the <code>sortProp</code>{' '}
          from our <code>data</code> object to accomplish this. If we neglect
          this, then the UI will be broken. So it is very important to remember
          this while defining the JSX for each column.
        </li>
        <li>
          For the first column in a table, we need to use the{' '}
          <code>mainColumn: true</code> in the configuration for that column.
          This is necessary for proper table styling.
          <JavascriptDisplay
            text={`{
  label: 'Actions',
  name: 'actions',
  mainColumn: true,  // This is necessary for proper table styling
  children: (data) => { ... }
  ...
}`}
          />
        </li>
        <li>
          If a column only contains a button, we need to use the{' '}
          <code>hasButton: true</code> in the configuration for that column.
          This is necessary for proper table styling.
          <JavascriptDisplay
            text={`{
  label: 'Actions',
  name: 'actions',
  hasButton: true,  // This is necessary for proper table styling
  children: (data) => { ... }
  ...
}`}
          />
        </li>
        {children}
      </ul>
    </div>
  )
}