import { Button, Flex, Select, Typography } from 'antd';
import { useState } from 'react';
import TaskGroupList from '@/pages/projects/projectView/taskList/groupTables/TaskGroupList';
import { TaskType } from '../../../../types/task.types';
import { useAppSelector } from '../../../../hooks/useAppSelector';
import { PageHeader } from '@ant-design/pro-components';
import { ArrowLeftOutlined, CaretDownFilled } from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import TaskListFilters from '@/pages/projects/projectView/taskList/task-list-filters/task-list-filters';
import { useSelectedProject } from '../../../../hooks/useSelectedProject';
import { useTranslation } from 'react-i18next';
import { toggleDrawer as togglePhaseDrawer } from '../../../../features/projects/singleProject/phase/phases.slice';
import { toggleDrawer } from '../../../../features/projects/status/StatusSlice';
import { useAppDispatch } from '../../../../hooks/useAppDispatch';
import React from 'react';
import { ITaskListGroup } from '@/types/tasks/taskList.types';

const PhaseDrawer = React.lazy(() => import('@features/projects/singleProject/phase/PhaseDrawer'));
const StatusDrawer = React.lazy(
  () => import('@/components/project-task-filters/create-status-drawer/create-status-drawer')
);

const ProjectTemplateEditView = () => {
  const dataSource: ITaskListGroup[] = useAppSelector(state => state.taskReducer.taskGroups);
  const groupBy = useAppSelector(state => state.taskReducer.groupBy);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { templateId, templateName } = useParams();
  type GroupTypes = 'status' | 'priority' | 'phase';

  const [activeGroup, setActiveGroup] = useState<GroupTypes>('status');

  const handleChange = (value: string) => {
    setActiveGroup(value as GroupTypes);
  };

  const { t } = useTranslation('task-list-filters');

  // get selected project from useSelectedPro
  const selectedProject = useSelectedProject();

  //get phases details from phases slice
  const phase =
    useAppSelector(state => state.phaseReducer.phaseList).find(
      phase => phase.id === selectedProject?.id
    ) || null;

  const groupDropdownMenuItems = [
    { key: 'status', value: 'status', label: t('statusText') },
    { key: 'priority', value: 'priority', label: t('priorityText') },
    {
      key: 'phase',
      value: 'phase',
      label: phase ? phase?.name : t('phaseText'),
    },
  ];
  return (
    <div style={{ marginBlock: 80, minHeight: '80vh' }}>
      <PageHeader
        className="site-page-header"
        title={
          <Flex gap={8} align="center">
            <ArrowLeftOutlined style={{ fontSize: 16 }} onClick={() => navigate(-1)} />
            <Typography.Title level={4} style={{ marginBlockEnd: 0, marginInlineStart: 12 }}>
              {templateName}
            </Typography.Title>
          </Flex>
        }
        style={{ padding: 0, marginBlockEnd: 24 }}
      />
      <Flex vertical gap={16}>
        <Flex gap={8} wrap={'wrap'}>
          <TaskListFilters position="list" />
          <Flex align="center" gap={4} style={{ marginInlineStart: 12 }}>
            {t('groupByText')}:
            <Select
              defaultValue={'status'}
              options={groupDropdownMenuItems}
              onChange={handleChange}
              suffixIcon={<CaretDownFilled />}
            />
          </Flex>
          {activeGroup === 'phase' ? (
            <Button type="primary" onClick={() => dispatch(togglePhaseDrawer())}>
              {t('addPhaseButton')}
            </Button>
          ) : activeGroup === 'status' ? (
            <Button type="primary" onClick={() => dispatch(toggleDrawer())}>
              {t('addStatusButton')}
            </Button>
          ) : (
            ''
          )}
        </Flex>

        <TaskGroupList taskGroups={dataSource} groupBy={groupBy} />
      </Flex>
      {/* phase drawer  */}
      <PhaseDrawer />
      {/* status drawer  */}
      <StatusDrawer />
    </div>
  );
};
export default ProjectTemplateEditView;