trampa-frontend/src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

import React, { useState } from "react";
import PropTypes from "prop-types";
import { useFormik } from "formik";
import {
  CreateOfferFormContainer,
  DescriptionField,
  FieldLabel,
  NextButton,
  TitleField,
} from "./FirstPartCreateOffer.styled";
// import { TextField } from "../../../TextFields/TextField/TextField";
// import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
import * as Yup from "yup";
import selectedTheme from "../../../../themes";
import { useTranslation } from "react-i18next";
import Option from "../../../Select/Option/Option";
import { SelectField } from "../CreateOffer.styled";
import { useSelector } from "react-redux";

const FirstPartCreateOffer = (props) => {
  const [subcat, setSubcat] = useState([{}]);
  const locations = useSelector((state) => state.locations.locations);
  const categories = useSelector((state) => state.categories.categories);

  console.log(locations);

  const { t } = useTranslation();
  const handleSubmit = (values) => {
    console.log(values);
    props.handleNext(values);
  };
  const formik = useFormik({
    initialValues: {
      nameOfProduct: "",
      description: "",
      location: "",
      category: "",
      subcategory: "",
    },
    validationSchema: Yup.object().shape({
      nameOfProduct: Yup.string().required(t("login.nameOfProductRequired")),
      description: Yup.string().required(t("login.descriptionRequired")).min(8),
      location: Yup.string().oneOf(locations.map((l) => l.city)),
      category: Yup.string().oneOf(categories.map((c) => c.name)),
      // subcategory: Yup.string().oneOf(
      //   subcat[0]?.subcategories ? subcat[0].subcategories : []
      // ),
    }),
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  const handleSubcategories = (category) => {
    const filtered = categories.filter((cat) => cat.name === category);
    setSubcat(filtered);
  };

  return (
    <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
      {/* <Backdrop position="absolute" isLoading={isLoading} /> */}

      <FieldLabel leftText={t("offer.title")} />
      <TitleField
        name="nameOfProduct"
        placeholder={t("offer.productName")}
        italicPlaceholder
        margin="normal"
        value={formik.values.nameOfProduct}
        onChange={formik.handleChange}
        error={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
        helperText={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
        autoFocus
        fullWidth
      />

      <FieldLabel leftText={t("offer.productDescription")} />
      <DescriptionField
        name="description"
        placeholder={t("offer.description")}
        margin="normal"
        italicPlaceholder
        value={formik.values.description}
        onChange={formik.handleChange}
        error={formik.touched.description && formik.errors.description}
        helperText={formik.touched.description && formik.errors.description}
        fullWidth
        multiline
        minRows={4}
        height={"100px"}
      />

      <FieldLabel leftText={t("offer.location")} />
      <SelectField
        defaultValue="default"
        onChange={(value) => {
          formik.setFieldValue("location", value.target.value.city);
        }}
      >
        <Option value="default">{t("offer.choseLocation")}</Option>
        {locations.map((loc) => {
          return (
            <Option key={loc._if} value={loc}>
              {loc.city}
            </Option>
          );
        })}
      </SelectField>

      <FieldLabel leftText={t("offer.category")} />
      <SelectField
        defaultValue="default"
        onChange={(value) => {
          formik.setFieldValue("category", value.target.value.name);
        }}
      >
        <Option value="default">{t("offer.choseCategory")}</Option>
        {categories.map((cat, i) => {
          return (
            <Option
              key={i}
              value={cat}
              onClick={() => handleSubcategories(cat.name)}
            >
              {cat.name}
            </Option>
          );
        })}
      </SelectField>

      <FieldLabel leftText={t("offer.subcategory")} />
      <SelectField
        defaultValue="default"
        onChange={(value) => {
          formik.setFieldValue("subcategory", value.target.value.name);
          console.log(value.target);
        }}
      >
        <Option value="default">{t("offer.choseSubcategory")}</Option>
        {subcat?.length > 0 &&
          subcat[0]?.subcategories &&
          subcat[0].subcategories.map((sub, i) => {
            return (
              <Option key={i} value={sub}>
                {sub.name}
              </Option>
            );
          })}
      </SelectField>

      <NextButton
        type="submit"
        variant="contained"
        height="48px"
        fullWidth
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
        //   disabled={
        //     formik.values.username.length === 0 ||
        //     formik.values.password.length === 0
        //   }
      >
        {t("offer.continue")}
      </NextButton>
    </CreateOfferFormContainer>
  );
};

FirstPartCreateOffer.propTypes = {
  children: PropTypes.any,
  handleNext: PropTypes.func,
};

export default FirstPartCreateOffer;