import Taro, { NodesRef, useLoad } from '@tarojs/taro';

import { Tabs } from '@taroify/core';
import { useCallback, useState } from 'react';

import JobList from '@/components/job-list';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import SearchInput from '@/components/search';
import { JOB_TABS, JobType } from '@/constants/job';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { logWithPrefix } from '@/utils/common';
import { getPageQuery } from '@/utils/route';

import './index.less';

const PREFIX = 'page-group-job';
const LIST_CLASS = `${PREFIX}__list-container`;
const SAFE_PADDING_BOTTOM_CLASS = `${PREFIX}__safe-padding-bottom`;
const CALC_LIST_PROPS: IUseListHeightProps = {
  selectors: [`.${LIST_CLASS}`, `.${PREFIX}`, `.${SAFE_PADDING_BOTTOM_CLASS}`],
  calc: (
    rects: [
      NodesRef.BoundingClientRectCallbackResult,
      NodesRef.BoundingClientRectCallbackResult,
      NodesRef.BoundingClientRectCallbackResult,
    ]
  ) => {
    const [listRect, pageRect, safePaddingRect] = rects;
    return pageRect.bottom - listRect.top - safePaddingRect.height;
  },
};
const log = logWithPrefix(PREFIX);

export default function GroupJob() {
  const listHeight = useListHeight(CALC_LIST_PROPS);
  const [tabType, setTabType] = useState<JobType>(JobType.All);
  const [value, setValue] = useState<string>('');
  const [keyWord, setKeyWord] = useState<string>('');
  const [groupId, setGroupId] = useState<string | undefined>();

  const handleClickSearch = useCallback(() => {
    if (value === keyWord) {
      return;
    }
    setKeyWord(value);
  }, [value, keyWord]);

  const handleSearchClear = useCallback(() => {
    setValue('');
    setKeyWord('');
  }, []);

  const handleSearchChange = useCallback(e => setValue(e.detail.value), []);

  const onTypeChange = useCallback(type => setTabType(type), [setTabType]);

  useLoad(() => {
    const query = getPageQuery<{ groupId: string; title: string }>();
    log('query', query);
    const title = query.title || '群通告';
    Taro.setNavigationBarTitle({ title });
    setGroupId(query.groupId);
  });

  return (
    <div className={PREFIX}>
      <SearchInput
        value={value}
        placeholder="搜索通告"
        className={`${PREFIX}__search`}
        onClear={handleSearchClear}
        onSearch={handleClickSearch}
        onChange={handleSearchChange}
      />
      <Tabs className={`${PREFIX}__type-tabs`} value={tabType} onChange={onTypeChange}>
        {JOB_TABS.map(tab => (
          <Tabs.TabPane title={tab.title} key={tab.type} value={tab.type}>
            {!groupId && <div className={LIST_CLASS} />}
            {groupId && (
              <JobList
                category={tab.type}
                keyWord={keyWord}
                blGroupId={groupId}
                className={LIST_CLASS}
                listHeight={listHeight}
                visible={tabType === tab.type}
              />
            )}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <SafeBottomPadding className={SAFE_PADDING_BOTTOM_CLASS} />
    </div>
  );
}
