import { createContext } from "react";

import { useContext } from "react";

// المكوّن الذي سيتم مشاركة قيمته يتم تعريفه خارج المكوّن الذي سيتم تضمينه فيه كما يلي
export const SomeContext = createContext();
    
// <SomeContext> بعدها يتم تعريف المكوّن الذي سيقوم باستخدام المكوّن
function Component() {
    // ليكون بالإمكان تحديث قيمته لاحقاً عند الجميع State هنا يتم ربط المتغير الذي سيتم مشاركة قيمته بــ
    const [someState, setSomeState] = useState();

    // someState و تمرير قيمة المتغير <SomeContext> هنا يتم وضع المكوّن
    // value التي سيتم مشاركتها مع أبنائه عن طريقة الخاصية
    return (
        <SomeContext.Provider value={someState}>
            {/*
                هنا يتم وضع المكونات الداخلية التي يمكنها الوصول 
                 useContext() عن طريق الدالة someState لقيمة    
            */}
        </SomeContext.Provider>
    );
}

function ChildComponent() {
    // value سيتم وضعها في المتغير <SomeContext> القيمة الموجودة في المكوّن
    const value = useContext(SomeContext);

    // كما يلي value و بعدها يمكنك عرض قيمة المتغير
    return (
        <div>{ value }</div>
    );
}

// Component1.js الموجود في الملف Component1 و المكوّن useState هنا قمنا قمنا بتضمين الهووك 
import { useState } from "react";
import Component1 from "./components/Component1";

// App هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function App() {
    // setMode() و يمكن تحديث قيمته من خلال استدعاء دالة إسمها 'light' قيمته الأولية mode هنا قمنا بتعريف متغير إسمه
    const [mode, setMode] = useState('light');
    
    // Component1 بالإضافة إلى محتوى المكوّن mode هنا قمنا بعرض قيمة المتغير 
    // Component1 كخاصية في المكوّن mode و لاحظ أننا قمنا بتمرير قيمة المتغير
    return (
        <>
            <p>In App we know that mode is set to {mode}</p>
            <Component1 mode={mode} />
        </>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// Component2.js الموجود في الملف Component2 هنا قمنا بتضمين المكوّن 
import Component2 from "./Component2";

// فيه props مع وضع الباراميتر Component1 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// التي سنمررها فيه عند تضمينه mode حتى نستطيع الوصول لقيمة الخاصية 
// بذات الطريقة Component2 و من ثم قمنا بتمريرها أيضاً كخاصية في المكوّن
function Component1(props) {
    return <Component2 mode={props.mode} />;
}

// يمكن الوصول إليه من خارج هذا الملف Component1 هنا قمنا بجعل المكون
export default Component1;

// Component3.js الموجود في الملف Component3 هنا قمنا بتضمين المكوّن 
import Component3 from "./Component3";

// فيه props مع وضع الباراميتر Component2 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// التي سنمررها فيه عند تضمينه mode حتى نستطيع الوصول لقيمة الخاصية 
// بذات الطريقة Component3 و من ثم قمنا بتمريرها أيضاً كخاصية في المكوّن
function Component2(props) {
    return <Component3 mode={props.mode} />;
}

// يمكن الوصول إليه من خارج هذا الملف Component2 هنا قمنا بجعل المكون
export default Component2;

// فيه props مع وضع الباراميتر Component3 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
// التي سنمررها فيه عند تضمينه mode حتى نستطيع الوصول لقيمة الخاصية 
function Component3(props) {
    return <p>In Component3 we know that mode is set to {props.mode}</p>;
}

// يمكن الوصول إليه من خارج هذا الملف Component3 هنا قمنا بجعل المكون
export default Component3;

// Component1.js الموجود في الملف Component1 بالإضافة إلى المكوّن createContext و useState هنا قمنا قمنا بتضمين الهووك 
import { useState, createContext } from "react";
import Component1 from "./components/Component1";

// يمكن مشاركة قيمته مع المكونات التي نضعها بداخله ModeContext هنا قمنا بإنشاء مكوّن إسمه
export const ModeContext = createContext();

// App هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function App() {
    // setMode() و يمكن تحديث قيمته من خلال استدعاء دالة إسمها 'light' قيمته الأولية mode هنا قمنا بتعريف متغير إسمه
    const [mode, setMode] = useState('light');
    
    // <ModeContext.Provider> كل المكونات التي سيتم فيها مشاركة القيمة معها وضعناها بداخل 
    // value التي مررناها له في الخاصية mode القيمة التي سيتم مشاركتها فيما بينهم، هي قيمة المتغير 
    // Component1 كخاصية في المكوّن mode و لاحظ أننا قمنا بتمرير قيمة المتغير
    return (
        <ModeContext.Provider value={mode}>
            <p>In App we know that mode is set to {mode}</p>
            <Component1/>
        </ModeContext.Provider>
    );
}

// يمكن الوصول إليه من خارج هذا الملف لأنه المكون App هنا قمنا بجعل المكون
// index.html  الرئيسي في الصفحة و الذي يتم تضمينه بشكل تلقائي في الملف
export default App;

// Component2.js الموجود في الملف Component2 هنا قمنا قمنا بتضمين المكوّن 
import Component2 from "./Component2";

// Component2 و فيها عرضنا محتوى المكون Component1 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Component1() {
    return <Component2/>;
}

// يمكن الوصول إليه من خارج هذا الملف Component1 هنا قمنا بجعل المكون
export default Component1;

// Component3.js الموجود في الملف Component3 هنا قمنا قمنا بتضمين المكوّن 
import Component3 from "./Component3";

// Component3 و فيها عرضنا محتوى المكون Component2 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Component2() {
    return <Component3/>;
}

// يمكن الوصول إليه من خارج هذا الملف Component2 هنا قمنا بجعل المكون
export default Component2;

// App.js الموجود في الملف ModeContext بالإضافة إلى المكوّن useContext هنا قمنا قمنا بتضمين الهووك 
import { useContext } from "react";
import { ModeContext } from "../App";

// Component3 هنا قمنا بتعريف دالة تمثل مكوّن إسمه
function Component3() {
    // mode في متغير إسمه ModeContext هنا قمنا بتخزين القيمة الموضوعة في المكوّن
    const mode = useContext(ModeContext);
    
    // mode هنا قمنا بعرض قيمة المتغير
    return <p>In Component3 we know that mode is set to {mode}</p>;
}

// يمكن الوصول إليه من خارج هذا الملف Component3 هنا قمنا بجعل المكون
export default Component3;