OrderSummary

"use client";

import React, { useEffect, useState } from "react";
import st from "./styles.module.scss";
import { H6, P } from "../TextStyles";
import Button from "@/components/Button";
import { photo_url } from "@/utils/apiUrl";
import Image from "@/components/Image";
import Bullet from "../Bullet";
import { Form, Formik } from "formik";
import CheckBox from "@/components/Fields/CheckBox";

import checkoutValidation from "@/_validations/checkoutReview";
import { formatNumber } from "@/utils/numbers";
import ProductSummary from "./ProductSummary";

const OrderSummary = ({
    cartData,
    checkoutStep,
    setCheckoutStep,
    submit,
    setCheckoutValues,
    setCheckoutErrors,
    checkoutErrors,
    shippingErrors,
    invoiceErrors,
    shippingDirty,
    invoiceDirty,
}) => {
    const [checkoutDirty, setCheckoutDirty] = useState({});
    const [checkoutValid, setCheckoutValid] = useState({});
    const setCheckout = (values, errors, dirty, valid) => {
        setCheckoutValues(values);
        setCheckoutErrors(errors);
        setCheckoutDirty(dirty);
        setCheckoutValid(valid);
    };

    return (
        <div className={st.wrapper}>
            {cartData && (
                <>
                    {/* {JSON.stringify(checkoutStep, null, 4)} */}

                    {/* {JSON.stringify(cartData, null, 4)} */}
                    <div className={st.titleGreenElement}>
                        <H6>Order summary</H6>
                        {/* <div className={st.greenElement}>
              <P className={st.greenElementTitle}>
                Your order will save <span>576 kg CO2</span>
              </P>
              <svg
                width="33"
                height="32"
                viewBox="0 0 33 32"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M37.4 15.71C37.398 18.0241 36.7099 20.2855 35.4226 22.2085C34.1354 24.1315 32.3068 25.6295 30.1682 26.5132C28.0295 27.3969 25.6768 27.6266 23.4076 27.1732C21.1384 26.7198 19.0546 25.6037 17.4198 23.9661C15.7849 22.3284 14.6724 20.2427 14.2229 17.9727C13.7734 15.7028 14.0071 13.3505 14.8944 11.2134C15.7818 9.07625 17.283 7.25022 19.2082 5.96625C21.1333 4.68228 23.396 3.99803 25.71 4C28.8122 4.0053 31.7856 5.24136 33.9773 7.43683C36.1691 9.63231 37.4 12.6078 37.4 15.71Z"
                  fill="#F3E8DA"
                />
                <path
                  d="M29.3391 7.39062C28.637 7.61157 27.89 7.64942 27.1692 7.50061C26.6792 7.40061 25.6691 7.19064 25.3091 7.97064C25.0517 8.49941 24.6696 8.9577 24.1958 9.30609C23.722 9.65448 23.1706 9.88255 22.5891 9.97064C22.0691 10.0506 21.8992 10.6006 21.8492 10.7806L20.9291 13.7806C20.7234 14.1623 20.6753 14.6093 20.7949 15.026C20.9145 15.4427 21.1924 15.7961 21.5691 16.0106C22.1381 16.642 22.8437 17.1351 23.6323 17.4523C24.4208 17.7694 25.2714 17.9023 26.1191 17.8406C26.5141 17.8004 26.9132 17.8274 27.2992 17.9207C27.4455 17.9665 27.5792 18.0453 27.6902 18.1511C27.8012 18.2568 27.8863 18.3867 27.9391 18.5306C27.9689 18.5878 27.9845 18.6512 27.9845 18.7156C27.9845 18.7801 27.9689 18.8435 27.9391 18.9006C27.8278 19.0974 27.7693 19.3196 27.7693 19.5457C27.7693 19.7717 27.8278 19.9939 27.9391 20.1906C27.9913 20.3107 28.0347 20.4343 28.0691 20.5606C28.0994 20.9601 28.0125 21.3598 27.8191 21.7106C27.5537 22.2064 27.4555 22.7746 27.5392 23.3306C27.7692 24.3306 28.8192 24.6806 29.5392 24.8306"
                  stroke="#3E562B"
                  stroke-miterlimit="10"
                />
                <path
                  d="M1.01953 16.309C1.41953 15.399 1.84956 14.959 2.29956 14.999H2.45953C2.61172 15.0255 2.76737 15.0255 2.91956 14.999C3.48956 14.939 3.75955 14.4691 3.97955 14.0891C4.07776 13.8661 4.22878 13.6705 4.41956 13.519C4.68426 13.4219 4.97486 13.4219 5.23956 13.519C5.58149 13.6287 5.94315 13.6628 6.29956 13.619C6.5591 13.5591 6.80841 13.4614 7.03955 13.329L7.12952 13.269C7.98189 12.8099 8.94222 12.5888 9.90955 12.629C10.2615 12.6841 10.6209 12.5978 10.9095 12.389C11.0038 12.3031 11.0784 12.1979 11.1285 12.0806C11.1785 11.9632 11.2027 11.8366 11.1995 11.709C11.1809 11.5147 11.1236 11.3261 11.0308 11.1544C10.9381 10.9826 10.8118 10.8312 10.6595 10.709L10.2795 10.449C10.1378 10.3645 10.0039 10.2674 9.87952 10.1591C9.99906 9.80194 10.0467 9.42463 10.0195 9.04901C9.96293 8.7266 10.0194 8.3946 10.1795 8.10907C10.3675 7.92703 10.6033 7.80213 10.8596 7.74902L11.1995 7.62903C11.5108 7.54411 11.7782 7.34386 11.9472 7.06897C12.1162 6.79408 12.1743 6.46519 12.1096 6.14905C12.055 6.00932 11.9809 5.878 11.8895 5.75903C11.8601 5.74389 11.8355 5.72097 11.8183 5.69275C11.8011 5.66453 11.792 5.63211 11.792 5.59906C11.792 5.56601 11.8011 5.53359 11.8183 5.50537C11.8355 5.47715 11.8601 5.45417 11.8895 5.43903C11.9997 5.29864 12.0752 5.13417 12.1096 4.95905C12.1996 4.38905 11.6695 4.04907 11.3795 3.85907C10.7172 3.42935 10.2202 2.78775 9.96954 2.03906"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M10.75 19.9609L14.26 25.9009"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8.58008 16.3086C8.58008 16.3086 15.7201 17.4886 18.6401 21.4686"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M16.61 31.72C25.2312 31.72 32.22 24.7312 32.22 16.11C32.22 7.48882 25.2312 0.5 16.61 0.5C7.98888 0.5 1 7.48882 1 16.11C1 24.7312 7.98888 31.72 16.61 31.72Z"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M22.5199 20.4688C22.5199 20.4688 16.7398 21.4687 14.8298 24.7487C13.0098 27.8787 16.1599 31.3287 16.1599 31.3287"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8.57905 16.3086C8.57905 16.3086 5.94905 23.7986 8.57905 28.2286C10.179 30.8986 13.249 31.2886 15.269 31.2286"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M22.5189 20.4688C22.5189 20.4688 24.5189 25.9887 22.5189 29.2687C20.6789 32.3887 16.1289 31.3287 16.1289 31.3287"
                  stroke="#3E562B"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div> */}
                    </div>
                    <div className={st.priceDetailsWrapper}>
                        <div className={st.priceAllDetails}>
                            <div className={st.priceDetails}>
                                <div className={st.priceDetail}>
                                    <P>Subtotal</P>
                                    <P>€{formatNumber(cartData.sub_total || 0)}</P>
                                </div>
                                {cartData.discount > 0 && (
                                    <div className={st.priceDetail}>
                                        <P>Discount</P>
                                        <P>-€{formatNumber(cartData.discount || 0)}</P>
                                    </div>
                                )}
                                {cartData.delivery > 0 && (
                                    <div className={st.priceDetail}>
                                        <P>Shipping</P>
                                        <P>€{formatNumber(cartData.delivery || 0)}</P>
                                    </div>
                                )}
                            </div>
                            <svg
                                width='100%'
                                height='1'
                                viewBox='0 0 357 1'
                                fill='none'
                                xmlns='http://www.w3.org/2000/svg'
                            >
                                <line y1='0.5' x2='357' y2='0.5' stroke='#4F1444' />
                            </svg>
                            <div className={st.priceTotal}>
                                <H6>Total</H6>
                                <H6>€{formatNumber(cartData.total)}</H6>
                            </div>
                            {checkoutStep === 3 && (
                                <Formik
                                    enableReinitialize
                                    initialValues={{
                                        agree_tac: false,
                                    }}
                                    validationSchema={checkoutValidation}
                                    // onSubmit={onSubmit}
                                    innerRef={(formikActions) =>
                                        formikActions &&
                                        setCheckout(
                                            formikActions.values,
                                            formikActions.errors,
                                            formikActions.dirty,
                                            formikActions.isValid
                                        )
                                    }
                                >
                                    {({ errors, touched, values }) => (
                                        <Form className={st.form}>
                                            <CheckBox
                                                label='I agree '
                                                name='agree_tac'
                                                link='/privacy-policy'
                                                linkText='Privacy policy'
                                                afterText='rules'
                                                link2='/terms-and-conditions'
                                                link2Text='Terms & Conditions'
                                            />
                                        </Form>
                                    )}
                                </Formik>
                            )}
                        </div>
                        {/* {JSON.stringify([[!checkoutDirty || !checkoutValid], shippingDirty, invoiceDirty])} */}
                        <div className={st.buttonAndInfo}>
                            {checkoutStep === 1 && (
                                <>
                                    <Button bg size='lg' onClick={() => setCheckoutStep(2)}>
                                        checkout
                                    </Button>
                                    <P size={"sm"}>You won’t be charged yet</P>
                                </>
                            )}
                            {/* {JSON.stringify([
                Object.keys(checkoutErrors).length,
                Object.keys(shippingErrors).length,
                Object.keys(invoiceErrors).length,
                shippingDirty,
                invoiceDirty,
              ])} */}
                            {checkoutStep === 2 && (
                                <Button
                                    bg
                                    size='lg'
                                    // onClick={() => submit()}
                                    onClick={() => setCheckoutStep(3)}
                                    disabled={
                                        Object.keys(checkoutErrors).length !== 0 ||
                                        Object.keys(shippingErrors).length !== 0 ||
                                        Object.keys(invoiceErrors).length !== 0 ||
                                        !shippingDirty ||
                                        !invoiceDirty
                                    }
                                >
                                    Preview and confirm
                                </Button>
                            )}
                            {checkoutStep === 3 && (
                                <Button
                                    bg
                                    size='lg'
                                    onClick={() => submit()}
                                    disabled={
                                        Object.keys(checkoutErrors).length !== 0 ||
                                        Object.keys(shippingErrors).length !== 0 ||
                                        Object.keys(invoiceErrors).length !== 0 ||
                                        !checkoutDirty ||
                                        !checkoutValid ||
                                        !shippingDirty ||
                                        !invoiceDirty
                                    }
                                >
                                    Confirm and pay
                                </Button>
                            )}
                            {checkoutStep >= 2 && (
                                <>
                                    <svg
                                        width='357'
                                        height='1'
                                        viewBox='0 0 357 1'
                                        fill='none'
                                        xmlns='http://www.w3.org/2000/svg'
                                        style={{ margin: "32px 0" }}
                                    >
                                        <line y1='0.5' x2='357' y2='0.5' stroke='#EFEFEF' />
                                    </svg>
                                    {/* {JSON.stringify(cartData, null, 4)} */}
                                    {/* {cartData.product.map((pr, i) => (
                                        <ProductSummary
                                            key={i}
                                            pr={pr}
                                            i={i}
                                            length={cartData.product.length - 1}
                                        />
                                    ))} */}
                                </>
                            )}
                        </div>
                    </div>
                </>
            )}
        </div>
    );
};

export default OrderSummary;