import React, { useState } from "react";
import LabledDropdown from "./LabledDropdown";
import { ArrowIcon } from "../../icons/ExportCommonIcons";

const PreviewSelectionWithUpload: React.FC = () => {
  const [showPreview, setSetshowPreview] = useState(false);
  return (
    <div className="preview-selection-with-upload-wrapper">
      <div
        className="input-header-container"
        onClick={() => setSetshowPreview(!showPreview)}
      >
        <div className="input-header">Preview</div>
        <div
          className="arrow-container"
          style={{ rotate: showPreview ? "0deg" : "90deg" }}
        >
          <ArrowIcon />
        </div>
      </div>
      {showPreview && (
        <div className="canvas-wrapper">
          <div className="canvas-container"></div>
        </div>
      )}
      <div className="asset-selection-container">
        <div className="upload-custom-asset-button">
          <div className="title">Upload Product</div>
          <input
            type="file"
            accept=".glb, .gltf"
            id="simulation-product-upload"
          />
          <label className="upload-button" htmlFor="simulation-product-upload">
            Upload here
          </label>
        </div>
      </div>
    </div>
  );
};

export default PreviewSelectionWithUpload;