import { useSessionStorageState } from 'ahooks'
import React, { useState } from 'react'

import { listCertificates, useListCertificates } from '../../../apiClient/api'
import { FormsCertificate } from '../../../apiClient/api/interface'
import { useTable } from '../../../components/Table'

import RegionSelect, { CertificateTable } from './Certificate'

export const Certification = () => {
  const [region, setRegion] = useState('us-west-2.aws')
  const { data, isLoading, isFetching } = useListCertificates(
    region,
    {},
    {
      query: {
        refetchIntervalInBackground: false,
        refetchInterval: false,
        refetchOnWindowFocus: false
      },
      request: {
        timeout: 60 * 1000
      }
    }
  )

  const [pageConfig, setPageConfig] = useSessionStorageState(
    'tenants_page_config',
    {
      defaultValue: {
        page: 1,
        pageSize: 0
      }
    }
  )

  const getData = (params?: Partial<PageInfo>) =>
    listCertificates(region, {
      page: params?.page,
      per_page: params?.pageSize
    })

  const { dataSource, loading, paginationProps } = useTable<
    ListData<FormsCertificate>
  >(getData, [], {
    pagination: true,
    current: pageConfig.page
  })

  const handleChange = (value: string) => {
    console.log(`selected ${value}`)
    setRegion(value)
  }

  return (
    <div>
      <RegionSelect onChangeFunc={handleChange}></RegionSelect>
      <CertificateTable loading={isFetching} data={data?.data || []} />
    </div>
  )
}

export default Certification