import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
import {
  Badge,
  Button,
  Checkbox,
  Divider,
  Form,
  Modal,
  Select,
  Table,
  Input,
  Typography,
  Row,
  Col
} from 'antd'
import TextArea from 'antd/lib/input/TextArea'
import { ColumnsType } from 'antd/lib/table'
import clsx from 'clsx'
import dayjs from 'dayjs'
import moment from 'moment'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { useLocation } from 'react-router-dom'

import { jiraControllerListUnifiedIssues } from 'apiClient/services/devops'
import {
  JiraControllerListUnifiedIssuesParams,
  JiraUnifiedIssue
} from 'apiClient/services/devops/interface'
import {
  MultiConditionSearchInput,
  SearchFilter,
  SearchOption
} from 'components/SearchBar/MultiConditionSearchBar'
import { ListToolBar, useTable } from 'components/Table'

import {
  IssueStatusDisplay,
  IssueTimeDisplay,
  IssueClusterTenantDisplay
} from './utils'

export default function Issues({
  preDefinedSearchParam
}: {
  preDefinedSearchParam?: JiraControllerListUnifiedIssuesParams
}) {
  const [searchParams, setSearchParams] =
    useState<JiraControllerListUnifiedIssuesParams>({})

  const getData = (params?: Partial<PageInfo>) =>
    jiraControllerListUnifiedIssues({
      ...searchParams,
      ...preDefinedSearchParam,
      page: params?.page,
      per_page: params?.pageSize
    })

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

  const search_options: SearchOption[] = [
    {
      key: 'status_is',
      label: 'Status',
      inputType: 'text'
    },
    {
      key: 'project_is',
      label: 'Project',
      inputType: 'text'
    },
    {
      key: 'cluster_id_is',
      label: 'Cluster ID',
      inputType: 'text'
    },
    {
      key: 'tenant_id_is',
      label: 'Tenant ID',
      inputType: 'text'
    },
    {
      key: 'created_after',
      label: 'Created After',
      inputType: 'date'
    },
    {
      key: 'created_before',
      label: 'Created Before',
      inputType: 'date'
    }
  ].filter((option) => {
    if (preDefinedSearchParam === undefined) {
      return true
    }
    if (
      option.key === 'status_is' &&
      preDefinedSearchParam.status_in !== undefined
    ) {
      return false
    }
    if (
      option.key === 'project_is' &&
      preDefinedSearchParam.project_in !== undefined
    ) {
      return false
    }
    if (
      option.key === 'cluster_id_is' &&
      preDefinedSearchParam.cluster_id_in !== undefined
    ) {
      return false
    }
    if (
      option.key === 'tenant_id_is' &&
      preDefinedSearchParam.tenant_id_in !== undefined
    ) {
      return false
    }
    if (
      option.key === 'created_after' &&
      preDefinedSearchParam.created_after !== undefined
    ) {
      return false
    }
    if (
      option.key === 'created_before' &&
      preDefinedSearchParam.created_before !== undefined
    ) {
      return false
    }
    return true
  })

  const handleSearchChange = (filters: SearchFilter[]) => {
    var newSearchParams = { ...searchParams }
    filters.forEach((filter) => {
      if (filter.key === 'status_is') {
        newSearchParams.status_in = [filter.value]
      }
      if (filter.key === 'project_is') {
        newSearchParams.project_in = [filter.value]
      }
      if (filter.key === 'cluster_id_is') {
        newSearchParams.cluster_id_in = [filter.value]
      }
      if (filter.key === 'tenant_id_is') {
        newSearchParams.tenant_id_in = [filter.value]
      }
      if (filter.key === 'created_after') {
        newSearchParams.created_after = moment(
          filter.value,
          moment.defaultFormat
        ).unix()
      }
      if (filter.key === 'created_before') {
        newSearchParams.created_before = moment(
          filter.value,
          moment.defaultFormat
        ).unix()
      }
      setSearchParams({ ...newSearchParams })
    })
    reload()
  }

  const columns: ColumnsType<JiraUnifiedIssue> = [
    {
      title: 'Key',
      fixed: 'left',
      width: 100,
      render: (_: any, record) => (
        <div>
          <Typography.Link href={`/aiops/issues/${record.key}`} target="_blank">
            {record.key}
          </Typography.Link>
        </div>
      )
    },
    {
      title: 'Summary',
      width: 300,
      render: (_: any, record) => {
        return record.issue_in_repo?.snapshot?.summary
      }
    },
    {
      title: 'Status',
      width: 150,
      render: (_: any, record) => {
        return (
          <IssueStatusDisplay
            status={record.issue_in_repo?.snapshot?.status!}
          ></IssueStatusDisplay>
        )
      }
    },
    {
      title: 'Time',
      width: 250,
      render: (_: any, record) => {
        return (
          <IssueTimeDisplay
            created_at={record.issue_in_repo?.snapshot?.created_at}
            resolved_at={record.issue_in_repo?.snapshot?.resolved_at}
          ></IssueTimeDisplay>
        )
      }
    },
    {
      title: 'Cluster & Tenant',
      width: 250,
      render: (_: any, record) => {
        return (
          <IssueClusterTenantDisplay
            jira_data={record.issue_in_repo?.snapshot?.customer_info}
          ></IssueClusterTenantDisplay>
        )
      }
    },
    {
      title: 'Assignee',
      width: 210,
      render: (_: any, record) => {
        return record.issue_in_repo?.snapshot?.assignee_email
      }
    }
  ]

  const actions = useMemo(
    () => [
      <MultiConditionSearchInput
        options={search_options}
        onChange={handleSearchChange}
      />
    ],
    []
  )

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

      <Table<JiraUnifiedIssue>
        columns={columns}
        rowKey="key"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
        scroll={{ x: 1500 }}
      />
    </div>
  )
}