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

interface PreviewSelectionWithUploadProps {
  preview?: boolean;
  upload?: boolean;
  label?: string;
  onSelect: (option: string) => void;
  defaultOption: string;
  options: string[];
}

const PreviewSelectionWithUpload: React.FC<PreviewSelectionWithUploadProps> = ({
  preview = false,
  upload = false,
  onSelect,
  label,
  defaultOption,
  options,
}) => {
  const [showPreview, setShowPreview] = useState(false);
  return (
    <div className="preview-selection-with-upload-wrapper">
      {preview && (
        <>
          <button
            className="input-header-container"
            onClick={() => setShowPreview(!showPreview)}
          >
            <div className="input-header">Preview</div>
            <div
              className="arrow-container"
              style={{ rotate: showPreview ? "0deg" : "90deg" }}
            >
              <ArrowIcon />
            </div>
          </button>
          {showPreview && (
            <div className="canvas-wrapper">
              <div className="canvas-container"></div>
            </div>
          )}
        </>
      )}
      {upload && (
        <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>
      )}
      <LabledDropdown
        label={label}
        defaultOption={defaultOption}
        options={options}
        onSelect={onSelect}
      />
    </div>
  );
};

export default PreviewSelectionWithUpload;