"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.AlbumQueryChooser = void 0;

var _react = _interopRequireDefault(require("react"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));

var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));

var _Input = _interopRequireDefault(require("@material-ui/core/Input"));

var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));

var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// import {useLocalStorage} from 'react-use';
const QUERIES = [{
  id: 'random',
  name: 'Random'
}, {
  id: 'newest',
  name: 'Recently Added'
}, {
  id: 'recent',
  name: 'Recently Played'
}, {
  id: 'frequent',
  name: 'Most Played'
}, {
  id: 'alphabeticalByName',
  name: 'By Album Name'
}, {
  id: 'alphabeticalByArtist',
  name: 'By Artist Name'
}, {
  id: 'starred',
  name: 'Starred'
}, {
  id: 'byYear',
  name: 'Oldest First'
}, {
  id: 'byYear reversed',
  name: 'Newest First'
}];

const AlbumQueryChooser = props => {
  const {
    native,
    albumQuery,
    setAlbumQuery,
    albumID3,
    setAlbumID3,
    musicFolderChooser,
    gridListToggle
  } = props; // const [plID, setPlID] = useLocalStorage('initAlbumPL', null);
  // const queries = [...QUERIES, { id: 'pl-' + plID, value: 'From Playlist'}];

  const queries = QUERIES;

  const handleChange = evt => {
    setAlbumQuery(evt.target.value);
  };

  const handleID3Change = (evt, isInputChecked) => {
    setAlbumID3(isInputChecked);
  }; // const handlePlaylistChange = newPL => {
  //   setPlID(newPL); // update pl which updates queries
  //   setAlbumQuery('pl-' + plID); // then update query`
  // };


  const queryItems = queries.map(m => {
    if (native) return /*#__PURE__*/_react.default.createElement("option", {
      key: m.id,
      value: m.id
    }, m.name);
    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
      key: m.id,
      value: m.id
    }, m.name);
  });
  let value = albumQuery;
  const id3 = albumID3 || false;
  const label = 'ID3?';
  const plMode = value.startsWith('pl-');
  let plSelect = null;

  if (plMode) {
    // const currentPlaylistId = value.substring(3);
    // plSelect = (
    //   <Grid item={true} xs={6} md={3}>
    //     <FormControl fullWidth={true}>
    //       <InputLabel htmlFor="pl-select">Playlist</InputLabel>
    //       <PlaylistsBrowser
    //         native={native}
    //         subsonic={props}
    //         SubsonicSource={SubsonicSource}
    //         renderMode={PlaylistsBrowser.renderTypes.SELECT}
    //         selectedId={currentPlaylistId}
    //         onSelect={handlePlaylistChange}
    //         showThumbs={false}
    //       />
    //     </FormControl>
    //   </Grid>
    // );
    plSelect = 'not implemented yet';
  }

  const id3Selector = /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 3,
    md: 1
  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
    control: /*#__PURE__*/_react.default.createElement(_Switch.default, {
      label: label,
      value: "id3",
      checked: id3,
      onChange: handleID3Change
    }),
    label: "ID3"
  }));

  const albumQuerySelector = /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: plMode ? 5 : 12,
    md: plMode ? 3 : 6
  }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
    htmlFor: "album-query-select"
  }, "Sorted By..."), /*#__PURE__*/_react.default.createElement(_Select.default, {
    native: native,
    value: value,
    onChange: handleChange,
    input: /*#__PURE__*/_react.default.createElement(_Input.default, {
      name: "album-query",
      id: "album-query-select"
    })
  }, queryItems))); // grid-list-toggle is passed down, album chooser sets and stores it like artist action buttons


  const gridListToggleSection = /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 4,
    md: 2
  }, gridListToggle);

  const musicFolderChooserSection = /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 5,
    md: 3
  }, musicFolderChooser);

  const content = window.innerWidth >= 960 ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true
  }, musicFolderChooserSection, albumQuerySelector, plSelect, id3Selector, gridListToggleSection) : /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true
  }, musicFolderChooserSection, id3Selector, gridListToggleSection, albumQuerySelector, plSelect);
  return content;
};

exports.AlbumQueryChooser = AlbumQueryChooser;
var _default = AlbumQueryChooser;
exports.default = _default;