import { PlusOutlined } from '@ant-design/icons'
import { Button, Popover, Table, Typography, Space } from 'antd'
import dayjs from 'dayjs'
import React, { useCallback, useMemo, useState } from 'react'
import { FlagIcon, FlagIconCode } from 'react-flag-kit'
import { useParams } from 'react-router-dom'

import { addRegion, listRegions, updateRegion } from 'apiClient/api'
import {
  FormsProviderRegion,
  FormsProviderRegionBody
} from 'apiClient/api/interface'
import CollapseCell from 'components/CollapseCell'
import ModalForm from 'components/ModalForm'
import { useTable, ListToolBar, ActionCell } from 'components/Table'
import { capitalize } from 'utils/string'

import { RegionModal } from '../Modals'

function NestedTable({ zones }: { zones: string[] }) {
  const renderItem = useCallback((zone: string) => {
    return <Typography>{zone}</Typography>
  }, [])

  const memoList = useMemo(() => zones, [zones])

  return <CollapseCell list={memoList} renderItem={renderItem} />
}

const format = 'HH:mm'

const Regions = () => {
  const { provider } = useParams<{ provider: string }>()
  const defaultRegion = {
    provider,
    name: '',
    display_name: '',
    area: '',
    country_code: '',
    priority: 0,
    status: '',
    zones: [],
    default_backup_time: '00:00'
  }
  const [region, setRegion] = useState<FormsProviderRegion>(defaultRegion)
  const [open, setOpen] = useState<'edit' | 'create' | null>(null)

  const getData = (params?: Partial<PageInfo>) =>
    listRegions(
      provider
      // params?.page,
      // params?.pageSize
    )

  const { dataSource, loading, reload, paginationProps, onTableChange } =
    useTable<ListData<FormsProviderRegion>>(getData, [], {
      pagination: true
    })

  const renderZonesCell = useCallback((_: any, record: FormsProviderRegion) => {
    const zones = record.zones || []
    return <NestedTable zones={zones} />
  }, [])

  const renderActionCell = useCallback(
    (_: any, record: FormsProviderRegion) => {
      async function handleEdit() {
        setOpen('edit')
        setRegion(record)
      }

      // async function handleDelete() {
      //   await deleteRegion(provider, record.id as string, {
      //     isShowMessage: true
      //   })

      //   message.success('Deleted successfully.')
      //   reload()
      // }

      const actions = [
        {
          name: 'edit',
          handler: handleEdit
        }
        // {
        //   name: 'delete',
        //   handler: handleDelete
        // }
      ]

      return <ActionCell actions={actions} />
    },
    []
  )

  const renderFormFields = useCallback(() => {
    return <RegionModal />
  }, [])

  const handleCreate = useCallback(
    async (payload: any) => {
      const { default_backup_time, ...rest } = payload
      return addRegion(provider, {
        default_backup_time: default_backup_time.format(format),
        ...rest
      }).then(() => {
        setOpen(null)
        reload()
      })
    },
    [provider, reload]
  )

  const handleEdit = useCallback(
    async (payload: any) => {
      const { default_backup_time, ...rest } = payload
      return updateRegion(provider, region.id as string, {
        default_backup_time: default_backup_time.format(format),
        ...rest
      }).then(() => {
        setOpen(null)
        reload()
      })
    },
    [provider, region, reload]
  )

  const handleCancel = useCallback(() => {
    setOpen(null)
  }, [])

  const columns = useMemo(() => {
    const dataCols = [
      'name',
      'display_name',
      'status',
      'provider',
      'priority',
      'area'
    ].map((_) => ({
      title: capitalize(_),
      dataIndex: _
    }))
    return [
      ...dataCols,
      {
        title: 'Country',
        render: ({ country_code }: FormsProviderRegion) => (
          <Space>
            <span>{country_code}</span>
            {country_code && (
              <FlagIcon
                className="flag-icon"
                code={country_code as FlagIconCode}
              />
            )}
          </Space>
        )
      },
      {
        title: 'Public',
        render: ({ is_public, opened_org_ids }: FormsProviderRegion) => (
          <Space direction="vertical">
            <span>{is_public?.toString() || 'false'}</span>
            {!is_public && (
              <Popover
                content={() => (
                  <div>
                    {opened_org_ids
                      ? opened_org_ids.map((o) => <p key={o}>{o}</p>)
                      : '-'}
                  </div>
                )}
                title="Opened Org IDs"
              >
                <Button type="link" style={{ padding: 0 }}>
                  Opened Org IDs
                </Button>
              </Popover>
            )}
          </Space>
        )
      },
      {
        title: 'Zones',
        render: renderZonesCell
      },
      {
        title: 'Action',
        dataIndex: 'action',
        render: renderActionCell
      }
    ]
  }, [renderZonesCell, renderActionCell])

  const actions = useMemo(
    () => [
      <Button
        type="primary"
        name="register"
        icon={<PlusOutlined />}
        onClick={() => {
          setOpen('create')
          setRegion(defaultRegion)
        }}
      >
        Create
      </Button>
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  )

  return (
    <>
      <ListToolBar reload={reload} actions={actions} />

      <Table<FormsProviderRegion>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        onChange={onTableChange}
        size="small"
      />

      <ModalForm
        visible={!!open}
        name="region"
        title={
          open === 'edit'
            ? `Update this region: ${region.name}`
            : 'Create a new region'
        }
        initValues={{
          ...region,
          default_backup_time: dayjs(region.default_backup_time, 'HH:mm')
        }}
        getFields={renderFormFields}
        onSubmit={open === 'edit' ? handleEdit : handleCreate}
        onCancel={handleCancel}
      />
    </>
  )
}

export default Regions