<div id="root"></div>

import React, { useState } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom/client";

function Code(props) {
  return (
    <code
      style={{
        backgroundColor: "#f0f0f0",
        padding: "2px 4px",
        borderRadius: "4px",
        wordBreak: "break-all",
      }}
      {...props}
    />
  );
}

function FileInput(props) {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    console.log(file);
    setFile(file);
  };

  return (
    <div>
      <input
        style={{ marginBottom: "8px" }}
        type="file"
        onChange={handleChange}
        {...props}
      />
      {file && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
          <span>name={<Code>{JSON.stringify(file.name)}</Code>}</span>
          <span>type={<Code>{JSON.stringify(file.type)}</Code>}</span>
          <span>size={<Code>{file.size.toLocaleString()}</Code>}</span>
        </div>
      )}
    </div>
  );
}

function App() {
  const groups = [
    {
      label: "HEIC を許可するパターン",
      items: [
        "",
        "image/*",
        "image/heic",
        "image/jpeg,image/png,image/gif,image/heic",
      ],
    },
    {
      label: "HEIC を許可しないパターン",
      items: [
        "image/jpeg",
        "image/png",
        "image/gif",
        "image/jpeg,image/png,image/gif",
        "image/png,image/gif,image/jpeg",
        "image/gif,image/png,image/jpeg",
      ],
    },
  ];

  return (
    <div style={{ padding: "0px 16px" }}>
      {groups.map((group, i) => (
        <div key={i}>
          <h2>{group.label}</h2>
          <dl>
            {group.items.map((item, j) => (
              <React.Fragment key={j}>
                <div>
                  <dt style={{ marginBottom: "8px" }}>
                    accept = <Code>{JSON.stringify(item)}</Code>
                  </dt>
                  <dd>
                    <FileInput accept={item} />
                  </dd>
                </div>
                <hr />
              </React.Fragment>
            ))}
          </dl>
        </div>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);