BalonRateInfoOverview

import { ReactElement } from 'react';
import { UseFormReturn } from 'react-hook-form';
import { fetchEntitet, fetchVrstaKredita } from 'src/api';
import useSWR from 'swr';

import { Box, Theme, Typography } from '@mui/material';

import {
  DateInput,
  Input,
  NumberInput,
  Overview,
  OverviewForm,
  Select,
} from '@shared/components';
import { OverviewFormBody } from '@shared/components/OverviewForm';
import { replaceUndefinedValues } from '@shared/utils/replaceObjectNullValues';

interface ITabDataProps {
  label: string | ReactElement;
  value: any;
  editField?: ReactElement | ReactElement[];
}

const getInfo1 = (
  data: Record<string, any>,
  theme: Theme,
  options?: Record<string, any>
): ITabDataProps[] => [
  {
    label: 'Ime',
    value: data?.ime || '',
    editField: <Input name="ime" />,
  },
  {
    label: 'Prezime',
    value: data?.prezime || '',
    editField: <Input name="prezime" />,
  },
  {
    label: 'Jmbg',
    value: data?.jmbg || '-',
    editField: <Input name="jmbg" />,
  },
];



export const BalonRateOverview1 = ({
  theme,
  methods,
  data,
  zahtjevSelectData,
}: any) => {
  return (
    <OverviewForm onSubmit={(_) => {}} methods={methods}>
      <OverviewFormBody
        key={JSON.stringify(data)}
        data={replaceUndefinedValues(
          getInfo1.apply(null, [data, theme, zahtjevSelectData])
        )}
      />
    </OverviewForm>
  );
};


export const BalonRateOverview = ({
  theme,
  methods,
  data,
  zahtjevSelectData,
}: any) => {
  return (
    <OverviewForm onSubmit={(_) => {}} methods={methods}>
      <Typography variant="h1" pl={2}>
        Podaci
      </Typography>
      <Box
        display="flex"
        flexDirection={{ xs: 'column', lg: 'row' }}
        width="100%"
        justifyContent="space-between"
      >
        <Box width="100%" marginRight={10}>
          <OverviewFormBody
            data={replaceUndefinedValues(
              getInfo1.apply(null, [data, theme, zahtjevSelectData])
            )}
          />
        </Box>

      </Box>
    </OverviewForm>
  );
};

const OverviewWrapper = ({
  theme,
  data,
  methods,
}: {
  theme: Theme;
  data: Record<string, any>;
  methods: UseFormReturn<any>;
}) => {
  const { data: vrstaKreditaData } = useSWR(
    `vrstaKreditaData`,
    fetchVrstaKredita,
    {
      fallbackData: [],
    }
  );

  const { data: entitetData } = useSWR(`entitetData`, fetchEntitet, {
    fallbackData: [],
  });

  return (
    <Overview
      header={<></>}
      flexRow
      sxBox={{ mr: 4, flex: 0.6, position: 'relative' }}
    >
      <BalonRateOverview
        theme={theme}
        methods={methods}
        data={data}
        zahtjevSelectData={{
          vrstaKreditaData,
          entitetData,
        }}
      />
    </Overview>

   
  );
};

export default OverviewWrapper;