+import PropTypes from 'prop-types';
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import i18n from '../../i18n';
+
+const ALTTPR_CODES = [
+ 'big-key',
+ 'bow',
+ 'blue-boomerang',
+ 'bomb',
+ 'bombos',
+ 'book',
+ 'boots',
+ 'bottle',
+ 'bow',
+ 'bugnet',
+ 'cape',
+ 'compass',
+ 'ether',
+ 'flippers',
+ 'flute',
+ 'glove',
+ 'green-mail',
+ 'green-pendant',
+ 'green-potion',
+ 'hammer',
+ 'heart-container',
+ 'hookshot',
+ 'ice-rod',
+ 'lamp',
+ 'map',
+ 'mirror',
+ 'mirror-shield',
+ 'moonpearl',
+ 'mushroom',
+ 'powder',
+ 'quake',
+ 'shovel',
+];
+
+const SMR_CODES = [
+ 'ALCOON',
+ 'ATOMIC',
+ 'BEETOM',
+ 'BOYON',
+ 'BULL',
+ 'CHOOT',
+ 'COVERN',
+ 'EVIR',
+ 'FUNE',
+ 'GAMET',
+ 'GEEMER',
+ 'GERUTA',
+ 'HOLTZ',
+ 'KAGO',
+ 'NAMIHE',
+ 'OUM',
+ 'OWTCH',
+ 'POWAMP',
+ 'PUROMI',
+ 'PUYO',
+ 'RINKA',
+ 'RIPPER',
+ 'SCISER',
+ 'SKREE',
+ 'SOVA',
+ 'TATORI',
+ 'VIOLA',
+ 'WAVER',
+ 'YARD',
+ 'ZEBBO',
+ 'ZEELA',
+ 'ZOA',
+];
+
+const SeedCodeInput = ({
+ className,
+ game,
+ name,
+ onBlur,
+ onChange,
+ value,
+}) => {
+ if (game === 'alttpr') {
+ const code_trans = ALTTPR_CODES
+ .map(code => ({ code, label: i18n.t(`icon.zelda.${code}`)}))
+ .sort((a, b) => a.label.localeCompare(b.label));
+ return <div
+ className={`${className} seed-code-input-alttpr`}
+ >
+ {[0, 1, 2, 3, 4].map(num =>
+ <Form.Select
+ key={num}
+ onBlur={onBlur}
+ onChange={onChange}
+ name={`${name}[${num}]`}
+ value={(value && value[num]) || ''}
+ >
+ <option value=""></option>
+ {code_trans.map(({ code, label }) =>
+ <option key={code} value={code}>{label}</option>
+ )}
+ </Form.Select>
+ )}
+ </div>;
+ }
+ if (game === 'smr') {
+ return <div
+ className={`${className} seed-code-input-smr`}
+ >
+ {[0, 1, 2, 3].map(num =>
+ <Form.Select
+ key={num}
+ onBlur={onBlur}
+ onChange={onChange}
+ name={`${name}[${num}]`}
+ value={(value && value[num]) || ''}
+ >
+ <option value=""></option>
+ {SMR_CODES.sort((a, b) => a.localeCompare(b)).map(code =>
+ <option key={code} value={code}>{code}</option>
+ )}
+ </Form.Select>
+ )}
+ </div>;
+ }
+ return <div
+ className={`${className} seed-code-input-default`}
+ >
+ {[0, 1, 2, 3, 4].map(num =>
+ <Form.Control
+ key={num}
+ onBlur={onBlur}
+ onChange={onChange}
+ name={`${name}[${num}]`}
+ value={(value && value[num]) || ''}
+ />
+ )}
+ </div>;
+};
+
+SeedCodeInput.propTypes = {
+ className: PropTypes.string,
+ game: PropTypes.string,
+ name: PropTypes.string,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func,
+ value: PropTypes.arrayOf(PropTypes.string),
+};
+
+SeedCodeInput.defaultProps = {
+ className: '',
+ game: '',
+ name: '',
+ onBlur: null,
+ onChange: null,
+ value: [],
+};
+
+export default withTranslation()(SeedCodeInput);