export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer', 'needs']))
  }
});

export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
  console.log('triggered :(');
  return {
    paths: [], //indicates that no page needs be created at build time
    fallback: 'blocking' //indicates the type of fallback
  };
};

function Need() {
  const [needDetails, setNeedDetails] = useState<NeedType>();
  const router = useRouter();
  const id = router.query.id as string;

  useEffect(() => {
    const fetchAndSetNeedDetails = async () => {
      const need = await NeedsService.getNeedById(id);
      setNeedDetails(need.data);
    };

    fetchAndSetNeedDetails();
  }, [id]);

  return (
    <section className="bg-heroLightBlue">
      {needDetails ? (
        <div className="flex flex-col gap-4 py-10 md:flex-row md:items-start md:justify-center">
          <div className="w-full max-w-5xl">
            <NeedDetails needData={needDetails!} />
          </div>
          <div className="w-full md:max-w-[21.25rem]">
            <SideBarDetails setNeedDetails={setNeedDetails} needData={needDetails} />
          </div>
        </div>
      ) : (
        <Loading />
      )}
    </section>
  );
}

export default Need;

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  console.log('I wish this would trigger :)');
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer']))
    }
  };
};

function AddNeed() {
  return (
    <h1>something</h1>
  )
}

export default AddNeed;

function Create() {
  return <div>Create</div>;
}

export default Create;

function AddNeed() {
  return (
    <h1>something</h1>
  )
}

export default AddNeed;

import enUS from 'date-fns/locale/en-US';
import fr from 'date-fns/locale/fr';
import { TFunction } from 'i18next';
import { DayPicker } from 'react-day-picker';
import { useTranslation } from 'next-i18next';
import { Setter } from '@/types/others';
import RadioButtonField from '@/components/RadioButtonField';
import { useRouter } from 'next/router';

interface DateStepProps {
  selectedDate: Date;
  setSelectedDate: Setter<Date>;
  selectedDateOption: number;
  setSelectedDateOption: Setter<number>;
}

const dateOptions = (t: TFunction) => [
  { id: 1, label: t('add_need.date.option_1') },
  { id: 2, label: t('add_need.date.option_2') },
  { id: 3, label: t('add_need.date.option_3') }
];

function DateStep({
  selectedDate,
  setSelectedDate,
  selectedDateOption,
  setSelectedDateOption
}: DateStepProps) {
  const router = useRouter();
  const { t } = useTranslation();

  return (
    <section>
      <ul className="flex flex-col sm:flex-row sm:justify-between">
        {dateOptions(t).map((option: any, index) => {
          return (
            <li key={index} className="pl-2 pt-2 sm:p-3 sm:pt-4">
              <RadioButtonField
                label={option.label}
                checked={selectedDateOption === option.id}
                onChange={() => setSelectedDateOption(option.id)}
              />
            </li>
          );
        })}
      </ul>
      <div className="mt-2 flex justify-center sm:mt-10">
        {selectedDateOption !== 1 && (
          <DayPicker
            mode="single"
            fromDate={new Date()}
            required
            selected={selectedDate}
            modifiersClassNames={{ selected: 'my-selected-day' }}
            weekStartsOn={0}
            onDayClick={(day) => setSelectedDate(day)}
            {/* THIS BELOW! */}
            locale={router.locale === 'fr' ? fr : enUS}
          />
        )}
      </div>
    </section>
  );
}

export default DateStep;