import { useShareAppMessage } from '@tarojs/taro';

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

import HomePage from '@/components/home-page';
import { PageType } from '@/constants/app';
import { GroupType, GROUP_PAGE_TABS } from '@/constants/group';
import GroupFragment from '@/fragments/group';
import useNavigation from '@/hooks/use-navigation';
import { getCommonShareMessage } from '@/utils/share';

import './index.less';

const PREFIX = 'group-page';

export default function Group() {
  const { barHeight, statusBarHeight } = useNavigation();
  const [tabType, setTabType] = useState<GroupType>(GroupType.All);

  const handleTypeChange = useCallback(value => setTabType(value), []);

  useShareAppMessage(() => getCommonShareMessage());

  return (
    <HomePage type={PageType.Group}>
      <Tabs
        swipeable
        value={tabType}
        className={`${PREFIX}__tabs`}
        onChange={handleTypeChange}
        style={{ height: barHeight.current, paddingTop: statusBarHeight.current }}
      >
        {GROUP_PAGE_TABS.map(tab => (
          <Tabs.TabPane value={tab.type} title={tab.title} key={tab.type}>
            <GroupFragment type={tab.type} />
          </Tabs.TabPane>
        ))}
      </Tabs>
    </HomePage>
  );
}