function MatchTypeSelector({ matchTypes, selectedType, onSelect }) { return /*#__PURE__*/ React.createElement("div", { className: "flex w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, matchTypes.map((type)=>/*#__PURE__*/ React.createElement("button", { key: type, onClick: ()=>onSelect(type), className: `flex-1 px-4 py-2 border ${selectedType === type ? 'bg-[#2eb9d6] text-white' : 'border-[#2eb9d6] text-[#2eb9d6]'}`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, type))); } function MatchTypeSelectorStory() { const [matchType, setMatchType] = React.useState('Americano'); const matchTypes = [ 'Americano', 'League', 'Competition' ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: matchTypes, selectedType: matchType, onSelect: setMatchType, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const [matchName, setMatchName] = React.useState(''); const [matchType, setMatchType] = React.useState(''); const [subMatchType, setSubMatchType] = React.useState(''); const [scoringMethod, setScoringMethod] = React.useState(''); const [points, setPoints] = React.useState(''); const [time, setTime] = React.useState(''); const [sets, setSets] = React.useState(''); const [players, setPlayers] = React.useState([ { name: '', gender: 'Male' } ]); const [isLoading, setIsLoading] = React.useState(false); const handleAddPlayer = ()=>{ setPlayers([ ...players, { name: '', gender: 'Male' } ]); }; const handlePlayerChange = (index, field, value)=>{ const updatedPlayers = [ ...players ]; updatedPlayers[index][field] = value; setPlayers(updatedPlayers); }; const handleCreateMatch = async ()=>{ setIsLoading(true); const matchData = { name: matchName, match_type: matchType, sub_match_type: subMatchType, scoring_method: scoringMethod, points: points ? parseInt(points) : null, time: time ? parseInt(time) : null, sets: sets ? parseInt(sets) : null, players: JSON.stringify(players) }; try { await fetch('/api/db/padelmatchin', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `matches` (name, match_type, sub_match_type, scoring_method, points, time, sets, players) VALUES (?, ?, ?, ?, ?, ?, ?, ?)', values: [ matchData.name, matchData.match_type, matchData.sub_match_type, matchData.scoring_method, matchData.points, matchData.time, matchData.sets, matchData.players ] }) }); setIsLoading(false); } catch (error) { console.error('Error creating match:', error); setIsLoading(false); } }; const isFormValid = ()=>{ return matchName && matchType && (matchType !== 'Americano' || subMatchType) && scoringMethod && players.every((player)=>player.name) && (scoringMethod !== 'Points' || points) && (scoringMethod !== 'Time' || time) && (scoringMethod !== 'Sets' || sets); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white min-h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#2eb9d6] mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Create new match"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Fill in the details to create a new padel match 🎾"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", htmlFor: "matchName", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "NAME"), /*#__PURE__*/ React.createElement("input", { id: "matchName", name: "matchName", type: "text", placeholder: "Enter name of match", className: "w-full p-2 border border-gray-300 rounded", value: matchName, onChange: (e)=>setMatchName(e.target.value), __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "TYPE OF MATCH"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: [ 'Americano', 'League', 'Competition' ], selectedType: matchType, onSelect: setMatchType, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this })), matchType === 'Americano' && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "AMERICANO TYPE"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: [ 'Classic', 'Mixed', 'Team' ], selectedType: subMatchType, onSelect: setSubMatchType, __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-2", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "In 'Americano' each player will team up once and every player will be collecting points individually.")), (matchType === 'Americano' || matchType === 'League' || matchType === 'Competition') && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "SCORING METHOD"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: matchType === 'Americano' ? [ 'Points', 'Time', 'Sets' ] : [ 'Sets' ], selectedType: scoringMethod, onSelect: setScoringMethod, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), scoringMethod === 'Points' && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "POINTS PER ROUND"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: [ '8', '16', '21', '24', '32', '40' ], selectedType: points, onSelect: setPoints, __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this })), scoringMethod === 'Time' && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "TIME PER ROUND"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: subMatchType === 'Classic' ? [ '12', '15' ] : subMatchType === 'Mixed' ? [ '15', '20' ] : [ '25', '30' ], selectedType: time, onSelect: setTime, __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this })), scoringMethod === 'Sets' && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "SETS PER ROUND"), /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: [ '1', '2', '3' ], selectedType: sets, onSelect: setSets, __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 bg-gray-100 p-4 rounded", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "PLAYERS"), players.map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: `Player or Team ${index + 1}`, className: `p-2 border border-gray-300 rounded ${subMatchType === 'Mixed' ? 'w-3/4' : 'w-full'}`, value: player.name, onChange: (e)=>handlePlayerChange(index, 'name', e.target.value), __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }), subMatchType === 'Mixed' && /*#__PURE__*/ React.createElement("div", { className: "w-1/4 ml-2", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(MatchTypeSelector, { matchTypes: [ 'Male', 'Female' ], selectedType: player.gender, onSelect: (gender)=>handlePlayerChange(index, 'gender', gender), __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: handleAddPlayer, className: "text-[#2eb9d6] hover:text-[#1a8ba3] mt-2", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, "Add player")), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateMatch, disabled: !isFormValid() || isLoading, className: `bg-[#2eb9d6] text-white px-4 py-2 rounded ${isFormValid() && !isLoading ? 'hover:bg-[#1a8ba3]' : 'opacity-50 cursor-not-allowed'}`, __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, "Creating Match...", /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin ml-2", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this })) : 'Create Match')); }