Untitled

import React, { FC, useState } from "react";
import { useUserContext } from "../../helpers/contexts/UserContext";
import { IWalletShowResponse, postWalletAddCredit, useDataWallet } from "../../helpers/connections/wallet";
import { useRouter } from "next/router";
import { toast } from "react-toastify";

const BalanceComponent: FC<{ data: IWalletShowResponse; walletMutator: any }> = ({ data, walletMutator }) => {
  const [rangePrice, setRangePrice] = useState<number>(10);
  const { user } = useUserContext();

  const handleAddCredit = () => {
    postWalletAddCredit(rangePrice, user.token!)
      .then((res) => {
        toast.success("Başarı ile eklendi");
        walletMutator();
      })
      .catch((err) => {
        return toast.error("Bir hata meydana geldi");
      });
  };

  return (
    <div className="flex justify-center item-center w-full  ">
    <div className="flex flex-wrap  flex-row w-full">
      <div className="flex flex-col px-16 py-6">
      <div className="header">
        <h3 className="text-[#577CFF] text-5xl font-normal">Balance</h3>
      </div>

      <div className="subtitle mt-6">
        <p className="text-white text-xl">Your balance: ₺{data.content.credit}</p>
      </div>

      <div className="radios mt-2 flex gap-8">
        <label className="cursor-pointer flex items-center">
          <input type="radio" id="type_buy" name="type" className="peer sr-only" defaultChecked />
          <span className="block h-4 w-4 rounded-full border-[3px] border-[#B9B9B9] bg-transparent peer-checked:border-[#2F49D1] peer-checked:bg-[#B9B9B9] peer-checked:border-4"></span>

          <span className="ml-1">Buy ticket</span>
        </label>
        <label className="cursor-pointer flex items-center">
          <input type="radio" id="type_sell" name="type" className="peer sr-only" />
          <span className="block h-4 w-4 rounded-full border-[3px] border-[#B9B9B9] bg-transparent peer-checked:border-[#2F49D1] peer-checked:bg-[#B9B9B9] peer-checked:border-4"></span>
          <span className="ml-1">Sell ticket</span>
        </label>
      </div>

      <div className="bg-slate-900 mt-12 p-8 rounded-lg">
        <p className="text-white font-medium text-sm">Add a ticket to {data.content.user.UserDetail.name} account</p>
        <div className="rangeslider mt-4">
          <input
            type="range"
            min="10"
            max="100"
            step={10}
            defaultValue={rangePrice}
            className="slider"
            onChange={(e) => setRangePrice(Number(e.target.value))}
          />
          <span className="text-lg text-slate-100">{rangePrice} ₺</span>
        </div>
        <div className="confirm flex mt-6 gap-4">
          <button className="p-3 rounded-lg bg-[#2F49D1] text-sm" onClick={handleAddCredit}>
            Confirm
          </button>
        </div>
      </div>
      </div>
      <div className="max-w-md mx-auto h-fit bg-gray-100 shadow-md rounded-md overflow-hidden mt-16">
        <div className="bg-blue-600 text-white p-4 flex justify-between">
          <div className="font-bold text-lg">Credit Card</div>
          <div className="text-lg">
            <i className="fab fa-cc-visa"></i>
          </div>
        </div>
        <div className="p-6">
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="card_number">
              Card Number
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="card_number"
              type="text"
              placeholder="xxxx xxxx xxxx xxxx"
            />
          </div>
          <div className="mb-4 flex justify-between">
            <div>
              <label className="block text-gray-700 font-bold mb-2" htmlFor="expiration_date">
                Expiration Date
              </label>
              <input
                className="shadow appearance-none border rounded w-24 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="expiration_date"
                type="text"
                placeholder="MM/YY"
              />
            </div>
            <div>
              <label className="block text-gray-700 font-bold mb-2" htmlFor="cvv">
                CVV
              </label>
              <input
                className="shadow appearance-none border rounded w-24 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="cvv"
                type="text"
                placeholder="XXX"
              />
            </div>
          </div>
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="name_on_card">
              Name on Card
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="name_on_card"
              type="text"
              placeholder="John Doe"
            />
          </div>
          <button className="bg-blue-600 text-white py-2 px-4 rounded font-bold hover:bg-blue-700 focus:outline-none focus:shadow-outline">
            Save Card
          </button>
        </div>
      </div>
    </div>
    </div>
  );
};

const BalanceComponentWrapper = () => {
  const { user } = useUserContext();
  const router = useRouter();

  if (!user.token) {
    router.push("/");
  }

  const { data, isLoading, isError, mutate } = useDataWallet(user.token!);

  if (isError) return <div className="p-5 text-xl">Failed to load; network/connection error.</div>;
  if (isLoading) return <div className="p-5 text-xl">Loading...</div>;

  return <BalanceComponent data={data!} walletMutator={mutate} />;
};

export default BalanceComponentWrapper;