import CanvasContext from "./Context/canvasContext/CanvasContext";
import { Button } from "./ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { useContext } from "react";

const aspectRatios = [
  { value: "1:1", label: "Square (1:1)" },
  { value: "4:3", label: "Standard (4:3)" },
  { value: "3:2", label: "Classic (3:2)" },
  { value: "16:9", label: "Widescreen (16:9)" },
  { value: "9:16", label: "Portrait (9:16)" },
  { value: "21:9", label: "Ultrawide (21:9)" },
  { value: "32:9", label: "Super Ultrawide (32:9)" },
  { value: "1.85:1", label: "Cinema Standard (1.85:1)" },
  { value: "2.39:1", label: "Anamorphic Widescreen (2.39:1)" },
  { value: "2.76:1", label: "Ultra Panavision 70 (2.76:1)" },
  { value: "5:4", label: "Large Format (5:4)" },
  { value: "7:5", label: "Artistic Format (7:5)" },
  { value: "11:8.5", label: "Letter Size (11:8.5)" },
  { value: "3:4", label: "Portrait (3:4)" },
  { value: "1.91:1", label: "Facebook Ads (1.91:1)" },
];

export function ActionButtons() {
  const { setCanvasRatio, canvasRatio } = useContext(CanvasContext);
  const handleRatioChange = (newRatio) => {
    setCanvasRatio(newRatio);
  };
  return (
    <div className="absolute top-4 right-0 z-50 flex items-center gap-2 bg-white rounded-l-[16px]">
      <div className="px-2 py-2">
        <div className="w-full">
          <Select onValueChange={handleRatioChange} value={canvasRatio}>
            <SelectTrigger className="w-full text-xs font-bold">
              <SelectValue placeholder="Select aspect ratio" />
            </SelectTrigger>
            <SelectContent>
              {aspectRatios.map((ratio) => (
                <SelectItem
                  key={ratio.value}
                  value={ratio.value}
                  className="text-xs font-bold"
                >
                  {ratio.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="mr-5">
        <Button
          variant="ghost"
          size="icon"
          className="rounded-[10px] border-[#6A47ED] border-[0.5px] bg-[#F5F2FF]"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="21"
            height="21"
            viewBox="0 0 21 21"
            fill="none"
          >
            <path
              d="M10.1288 13.041V1"
              stroke="#6A47ED"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M13.0448 10.1143L10.1288 13.0423L7.21277 10.1143"
              stroke="#6A47ED"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M14.62 5.50879C18.199 5.83879 19.5 7.17879 19.5 12.5088C19.5 19.6088 17.189 19.6088 10.25 19.6088C3.309 19.6088 1 19.6088 1 12.5088C1 7.17879 2.3 5.83879 5.88 5.50879"
              stroke="#6A47ED"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </Button>
      </div>
    </div>
  );
}