import React, { useEffect, useState } from "react"

import CommonTable, { CommonTableHead } from "@/components/CommonTable"

import { Collection } from "./collections"
import { Schema } from "./schema"
import { Columns } from "./columns"

import { editableController } from "./controllers/editableController"
import { CommonTableDefaultProps as DefaultProps } from "@/components/CommonTable/models/defaultProps"
import rxSubscribe from "@/utils/database/rxSubscribe"
import tableIcons from "@/components/CommonTable/models/tableIcons"
import { useTheme } from "@material-ui/core/styles"
import { useTranslation } from "react-i18next"

export default function LocalLeftMenuContainer() {
  const { t } = useTranslation("table")
  const theme = useTheme()
  const [data, setData] = useState([])

  useEffect(() => {
    ;(async () => {
      await rxSubscribe({
        collection: Collection.name,
        sort: { name: "desc" },
        callback: data => setData(data)
      })
    })()
  }, [])

  return (
    <>
      <CommonTableHead title={t(Schema.title)} />
      <CommonTable
        title={t(Schema.title)}
        columns={Columns({ t })}
        editable={editableController()}
        data={data}
        // style
        style={DefaultProps.style}
        // icons
        icons={tableIcons({ theme })}
        // options
        options={{ ...DefaultProps.options }}
      />
    </>
  )
}