import router from 'next/router'
import Link from 'next/link'
import ActionBar from '~/components/admin/actionBar'
import {DateTime} from 'luxon'
import Table from '~/components/table'


AdminConfig.getInitialProps = async ({ctx}) => {
  const {data: config} = await ctx.axios.get('/api/config')
  return {config}
}

export default function AdminConfig({config}) {
  return (
    <>
      <ActionBar title="Config"/>
      <Table
        columns={[
          {name: 'Parameter', extractor: config => config.name},
          {name: 'Value', extractor: config => config.value},
          {name: '', extractor: config => 
            config.href && (
              <Link href={config.href}><a>Edit</a></Link>
            )
          }
        ]}
        rows={[
          {id: 'tax', name: 'UT Tax Percent', value: parseFloat(config.default_tax_percent) + '%'},
          {id: 'address', name: 'Shipping Source Address', value: (() => {
            if(!config.shipping_from)
              return 'Unset'

            const {name, street1} = config.shipping_from
            return `${name}, ${street1}`.slice(0, 20) + '...'
          })(), href: '/admin/config/shipping'},
        ]}
      />
      {config.modified_by && (
        <p>
          Config last modified on
          {' ' + DateTime.fromISO(config.date_updated).setZone('local').toFormat('LLL dd, yyyy') + ' '}
          by {config.modified_by.email}
        </p>
      )}

    </>
  )
}