import React, { useEffect } from 'react';
import styled from 'styled-components';
import {
  BackgroundModal,
  useApiHook,
  useAxios,
} from '@bjsdistribution/dms-component-library';
import HeaderSection from './Header';
import TextSection from './TextSection';
import ButtonsSection from './Dropdowns';
import { RadioButtonsSection, SaveDetails } from './Actions';
import {
  // useTasksData,
  useStaticData,
  useFlagById,
  useFlagRefId,
  useTasksData,
  useUpdateTask,
} from '../order-actions/store';
import DetailSection from './DetailSection';
import { allTypes } from '../order-actions/types';
import { useOrderId } from '../store';

interface ApiResponse {
  message: string;
  code: number;
  error: string | null;
  error_traceback: string | null;
  data: allTypes[];
}

function ViewFlag() {
  const [, setStaticData] = useStaticData();
  const [flagById, setFlagById] = useFlagById();
  const [taskPayload, setTaskPayload] = useUpdateTask();
  const [selectedFlagId] = useFlagRefId();
  const [orderId] = useOrderId();
  const [, setTasksData] = useTasksData();

  //single flag data
  const { data: flagDataById, fetchData: fetchedFlagById, loading } = useAxios<
    ApiResponse
  >({
    endpoint: `/v1/task/${selectedFlagId}`,
    method: 'GET',
  });

  // API Call
  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
    endpoint: `/v1/task/getStaticData/all/`,
    method: 'GET',
  });

  useEffect(() => {
    if (fetchedStaticData) {
      setStaticData(fetchedStaticData?.data);
    }
  }, [fetchedStaticData]);

  //Unresolved API
  const { fetchData: callUnresolvedTaskApi } = useAxios<{
    data: ApiResponse[];
  }>({
    endpoint: `/v1/task/`,
    method: 'GET',
    pagination: { is_pagination: false },
    filters: [{ field: 'order_id', op: '=', value: orderId }],
  });

  useEffect(() => {
    if (selectedFlagId) {
      fetchedFlagById();
    }
  }, [selectedFlagId]);

  useEffect(() => {
    if (flagDataById && flagDataById?.data) {
      setFlagById(flagDataById?.data[0]);
    }
  }, [loading]);

  useEffect(() => {
    if (flagById) {
      setTaskPayload({
        ...taskPayload,
        flag_type: flagById?.task_type_id,
        description: flagById?.description,
        priority: flagById?.task_priority_id,
        id: flagById?.id,
        is_private: flagById?.is_private,
      });
    }
  }, [flagById]);

  return (
    <>
      {
        <BackgroundModals>
          <MainContainer>
            <HeaderSection
              callUnresolvedTaskApi={callUnresolvedTaskApi}
              setTasksData={setTasksData}
            />
            <DetailSection />
            <TextSection />
            <ButtonsSection />
            <SectionsContainer>
              <SaveDetails
                callUnresolvedTaskApi={callUnresolvedTaskApi}
                setTasksData={setTasksData}
              />
              <RadioButtonsSection />
            </SectionsContainer>
          </MainContainer>
        </BackgroundModals>
      }
    </>
  );
}

const SectionsContainer = styled.div`
  display: flex;
  align-items: center;
  margin-top: 6%;
`;

const BackgroundModals = styled(BackgroundModal)`
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
`;

const MainContainer = styled.div`
  padding: 24px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0px 20px 24px -4px #10182814;
  width: 80%;
  max-width: 50%;
  margin: 0 auto;
  @media (max-width: 1024px) {
    max-width: 80%;
  }
`;

export default ViewFlag;
