"use client";

import { useState } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/app/common/astra-ui/select";
import { Button } from "@/app/common/astra-ui/button";
import { Input } from "@/app/common/astra-ui/input";
import { ArrowRightAndLeftIcon } from "@astraicons/react/linear";
import { ArrowDownFillIcon } from "@astraicons/react/bold";

export const dummyRates = {
  sol: { name: "Solana", unit: "SOL", value: 150 },
  btc: { name: "Bitcoin", unit: "BTC", value: 1 },
  eth: { name: "Ethereum", unit: "ETH", value: 15 },
  eur: { name: "Euro", unit: "EUR", value: 27000 },
  ada: { name: "Cardano", unit: "ADA", value: 0.25 },
};

const DefaultCurrenyExchangeDemo = () => {
  const [fromCurrency, setFromCurrency] = useState<string>("btc");
  const [fromValue, setFromValue] = useState<number>(0);
  const [toCurrency, setToCurrency] = useState<string>("eth");
  const [toValue, setToValue] = useState<number>(0);

  return (
    <div className="w-full rounded-3xl overflow-hidden backdrop-blur-xl bg-grayscale-surface flex flex-col gap-y-4">
      <div className="p-4 flex flex-col gap-y-[9px]">
        <div className="flex justify-between items-center">
          <h1 className="text-xs leading-5 text-grayscale-textIcon-subtitle font-medium">
            Chooose Crypto
          </h1>
          <h1 className="text-xs leading-5 text-grayscale-textIcon-subtitle font-medium">
            Balance:
          </h1>
        </div>
        <div className="flex justify-start items-center">
          <Select onValueChange={setFromCurrency} defaultValue={fromCurrency}>
            <SelectTrigger
              className="size-auto p-0 border-none hover:border-none focus:border-none gap-x-1.5"
              customIcon={
                <ArrowDownFillIcon className="text-grayscale-textIcon-title size-6" />
              }
            >
              <div className="flex gap-x-1.5 items-center">
                {cryptoIcons["sol"]}
                <SelectValue />
              </div>
            </SelectTrigger>
            <SelectContent position="popper" className="max-h-40">
              {Object.entries(dummyRates).map(([key, value]) => (
                <SelectItem key={key} value={key}>
                  {value.unit}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Input
            type="number"
            value={fromValue}
            onChange={(e) => setFromValue(+e.target.value)}
            placeholder="Enter amount"
            className="text-end h-[30px] bg-transparent border-none hover:border-none focus:border-none p-0 text-lg leading-[30x] text-grayscale-textIcon-title"
          />
        </div>
      </div>

      <div className="w-full flex justify-center items-center">
        <Button icon variant="secondary" className="p-2">
          <ArrowRightAndLeftIcon className="size-6" />
        </Button>
      </div>

      <div className="p-4 flex flex-col gap-y-[9px]">
        <div className="flex justify-between items-center">
          <h1 className="text-xs leading-5 text-grayscale-textIcon-subtitle font-medium">
            Chooose Crypto
          </h1>
          <h1 className="text-xs leading-5 text-grayscale-textIcon-subtitle font-medium">
            Balance:
          </h1>
        </div>
        <div className="flex justify-start items-center">
          <Select onValueChange={setToCurrency} defaultValue={toCurrency}>
            <SelectTrigger
              className="size-auto p-0 border-none hover:border-none focus:border-none gap-x-1.5"
              customIcon={
                <ArrowDownFillIcon className="text-grayscale-textIcon-title size-6" />
              }
            >
              <div className="flex gap-x-1.5 items-center">
                {cryptoIcons["sol"]}
                <SelectValue />
              </div>
            </SelectTrigger>
            <SelectContent position="popper" className="max-h-40">
              {Object.entries(dummyRates).map(([key, value]) => (
                <SelectItem key={key} value={key}>
                  {value.unit}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Input
            type="number"
            value={toValue}
            onChange={(e) => setToValue(+e.target.value)}
            placeholder="Enter amount"
            className="text-end h-[30px] bg-transparent border-none hover:border-none focus:border-none p-0 text-lg leading-[30x] text-grayscale-textIcon-title"
          />
        </div>
      </div>
    </div>
  );
};

export default DefaultCurrenyExchangeDemo;

// Crypto icons map
const cryptoIcons: Record<string, JSX.Element> = {
  sol: (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <rect width="24" height="24" rx="12" fill="#2D2D2D" />
      <path
        d="M7.46723 14.8624C7.54917 14.78 7.66184 14.732 7.78134 14.732L18.6179 14.732C18.816 14.732 18.915 14.9721 18.775 15.1128L16.6343 17.2638C16.5524 17.3461 16.4397 17.3941 16.3202 17.3941H5.4836C5.28557 17.3941 5.18656 17.154 5.32654 17.0133L7.46723 14.8624Z"
        fill="url(#paint0_linear_8791_8434)"
      />
      <path
        d="M7.46723 6.83123C7.55259 6.74889 7.66525 6.70087 7.78134 6.70087L18.6179 6.70087C18.816 6.70087 18.915 6.94101 18.775 7.08166L16.6343 9.23264C16.5524 9.31497 16.4397 9.363 16.3202 9.363H5.4836C5.28557 9.363 5.18656 9.12286 5.32654 8.9822L7.46723 6.83123Z"
        fill="url(#paint1_linear_8791_8434)"
      />
      <path
        d="M16.6343 10.821C16.5524 10.7387 16.4397 10.6907 16.3202 10.6907L5.4836 10.6907C5.28557 10.6907 5.18656 10.9308 5.32654 11.0715L7.46723 13.2224C7.54917 13.3048 7.66184 13.3528 7.78134 13.3528L18.6179 13.3528C18.816 13.3528 18.915 13.1127 18.775 12.972L16.6343 10.821Z"
        fill="url(#paint2_linear_8791_8434)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_8791_8434"
          x1="17.5827"
          y1="5.41606"
          x2="10.0263"
          y2="19.8205"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#00FFA3" />
          <stop offset="1" stopColor="#DC1FFF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_8791_8434"
          x1="14.3034"
          y1="3.69563"
          x2="6.74696"
          y2="18.1"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#00FFA3" />
          <stop offset="1" stopColor="#DC1FFF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_8791_8434"
          x1="15.9326"
          y1="4.55034"
          x2="8.37617"
          y2="18.9548"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#00FFA3" />
          <stop offset="1" stopColor="#DC1FFF" />
        </linearGradient>
      </defs>
    </svg>
  ),
};
Components

Chooose Crypto

Balance:

Chooose Crypto

Balance:
