import DT from 'datatables.net-dt'
import DataTable from 'datatables.net-react'
import { useState } from 'react'

import { Button } from '~/components/ui/button'
import { TitleDashboard } from '~/components/ui/title-dashboard'

import { SUBSCRIPTIONS, SUBSETTINGS } from './data'

export const SubscriptionsPage = () => {
  const [SubscribtionOpen, setSubscribtionOpen] = useState(true)
  // const [SubSettingOpen, setSubSettingOpen] = useState(false)
  DataTable.use(DT)
  const colTableSubscription = [
    { title: 'No', data: 'id' },
    { title: 'Tanggal Subscribe', data: 'date' },
    { title: 'Nama User', data: 'name' },
    { title: 'Email', data: 'email' },
    { title: 'Kategori', data: 'category' },
    { title: 'Status', data: 'status' },
    { title: 'Action', data: 'id', render: () => 'Subscribed' },
  ]
  const colTableSubSetting = [
    { title: 'No', data: 'id' },
    { title: 'Tanggal Pembuatan', data: 'createdAt' },
    { title: 'Nama Subscription', data: 'subscriber' },
    { title: 'Price', data: 'price' },
    { title: 'Length', data: 'length' },
    { title: 'Status', data: 'status', render: () => 'Active' },
  ]

  const switchViee = () => {
    setSubscribtionOpen(!SubscribtionOpen)
  }

  return (
    <div className="relative">
      <TitleDashboard title="Subscription" />
      <div className="float-right">
        <Button
          className="mb-5 w-[160px] rounded-md"
          onClick={switchViee}
        >
          {SubscribtionOpen ? 'Subscriptions' : 'Save'}
        </Button>
      </div>

      {SubscribtionOpen && (
        <DataTable
          // className="cell-border"
          data={SUBSCRIPTIONS}
          columns={colTableSubscription}
          options={{
            paging: true,
            searching: true,
            ordering: true,
            info: true,
          }}
        ></DataTable>
      )}

      {!SubscribtionOpen && (
        <DataTable
          className="cell-border"
          data={SUBSETTINGS}
          columns={colTableSubSetting}
          options={{
            paging: true,
            searching: true,
            ordering: true,
            info: true,
          }}
        ></DataTable>
      )}
    </div>
  )
}