import React, { useState } from "react";
import { languages } from "./languages";

interface LanguageSelectorProps {
  onChange: (event: any) => void;
  defaultLanguage?: string;
}

const Index = (props: LanguageSelectorProps) => {
  const { onChange } = props;
  let { defaultLanguage } = props;

  if (!defaultLanguage) {
    defaultLanguage = "plaintext";
  }

  const [selectedLanguage, setSelectedLanguage] =
    useState<string>(defaultLanguage);

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedLanguage(event.target.value);
    onChange(event);
  };

  return (
    <select
      className="select bg-base-200 text-base-content w-full max-w-xs"
      value={selectedLanguage}
      onChange={handleChange}
    >
      {Object.entries(languages).map(([key, value]) => (
        <option
          disabled={selectedLanguage === key}
          defaultValue={selectedLanguage}
          // selected={selectedLanguage === key}
          key={key}
          value={key}
        >
          {value}
        </option>
      ))}
    </select>
  );
};

export default Index;