// import React, { useState, useEffect, useRef } from 'react';
// import { Button, Flex, } from 'antd';
// import { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';
// import { Col, Row, Tour, ConfigProvider } from 'antd';
// import { CaretRightOutlined } from '@ant-design/icons';
// import { Slider, Input } from 'antd';
// import { Breadcrumb, Layout, Menu, Dropdown, theme, Avatar } from 'antd';
// import { Drawer, Cascader, Radio } from 'antd';
// import { RedoOutlined, PauseOutlined, StepForwardOutlined, StepBackwardOutlined } from '@ant-design/icons';
// import { Tooltip, FloatButton, Space, Switch } from 'antd';
// import '../CSS/sample.css';
// import { Modal } from 'antd';
// import ConstantTxt from '../Canvas/ConstantTxt'
// import Fixed from '../Canvas/Fixed'
// import Stair from '../Canvas/Stair'
// import Heteronym from '../Canvas/Heteronym'
// import type { RadioChangeEvent } from 'antd';
// import type { TourProps } from 'antd';
// import ReactAudioPlayer from 'react-audio-player';
// import type { SliderSingleProps } from 'antd';
// import type { UploadProps } from 'antd';
// import { UploadOutlined, ArrowLeftOutlined, RollbackOutlined } from '@ant-design/icons';
// import { message, Upload } from 'antd';
// import hark from 'hark';
// import { useLocation } from 'react-router-dom';
// import { Typography } from 'antd';
// import type { CollapseProps } from 'antd';
// import { Collapse } from 'antd';
// import { Image } from 'antd';
// import divide_1 from '../icon/Divider2-half.png'
// import { UserOutlined } from '@ant-design/icons';
// import { QuestionOutlined } from '@ant-design/icons';
// import { adjustCanvasScale, map, drawBackground, generateNotesAndFrequencies } from '../function/canvasDefault';
// import { useTemString } from '../hooks/useTemString';
// import { useCanvasHooks } from '../hooks/useCanvasHooks';
// import type { MenuProps } from 'antd';
// // @ts-ignore
// import pdfToText from 'react-pdftotext';
// import useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';
// import AudioPlayer from 'react-h5-audio-player';
// import { createFromIconfontCN } from '@ant-design/icons';
// import { useOptionsHooks } from '../hooks/useOptionsHooks';
// import ConstantVol from '../Canvas/ConstantVol'

// const PlayIcon = createFromIconfontCN({
//   scriptUrl: '//at.alicdn.com/t/c/font_4566050_zpduwnlv2t.js',
// });

// const { TextArea } = Input;
// const { Title, Paragraph, Text, Link } = Typography;
// type MenuTheme = 'show' | 'hide';

// const { Content } = Layout;

// const marksRange: SliderSingleProps['marks'] = {
//   50: '50Hz',
//   600: '600Hz'
// };

// const marksBallPos: SliderSingleProps['marks'] = {
//   0: '0%',
//   1: '100%'
// };
// const marksVol: SliderSingleProps['marks'] = {
//   50: '50dB',
//   90: '90dB'
// };













// function SampleVolume() {














//     // strings
//     const {
//       items_3,
//       stairFilenames,
//       heteronymFilenames,
//       shortDescription,
//     } = useTemString();

//       // Canvas values
//   const size = [400, 1400];
//   const [initialRange, setInitialRange] = useState<number[]>([100, 300]);
//   const [config, setConfig] = useState({
//     SRATE: 48000,
//     fxmin: 50,
//     fxlow: 50 + 50, // This initial value will be updated by useEffect below
//     fxhigh: 600 - 200, // This initial value will be updated by useEffect below
//     fxmax: 600
//   });
//   const [COLORS, setCOLORS] = useState({
//     realVoiceColor: '#d679de', 
//     targetVoiceColor: '#4669C8', 
//     closeVoiceColor: '#15dbcc', 
//   }
// );
// const [COLORSMode,setCOLORSMode] = useState("de");

//   // open/close 
//   const [openSetting, setOpenSetting] = useState(false);
//   const [txtShow, setTxtShow] = useState<string>("true");
//   const [txtShowSwitch, setTxtShowSwitch] = useState<MenuTheme>('show');
//   const [openTour, setOpenTour] = useState<boolean>(false);
//   const [isPlaying, setIsPlaying] = useState(true);
//   const [isRetry, setIsRetry] = useState(false);
//   const [enableVol, setEnableVol] = useState<boolean>(false);
//   const [isOpenTextbox, setIsOpenTextbox] = useState<boolean>(false);
//   const [showNextPre, setShowNextPre] = useState<boolean>(false);
//   const [showListen, setShowListen] = useState<boolean>(false);

//     // special vatiables
//     const location = useLocation();
//     const ref12 = useRef(null);
//     const ref1 = useRef(null);
//     const ref2 = useRef(null);
//     const ref3 = useRef(null);
//     const parentRef = useRef<HTMLDivElement>(null);

//       // initial Value
//   const [volume, setVolume] = useState(0);
//   const [threshold, setThreshold] = useState<number>(70);
//   const [maxLyricCount, setMaxLyricCount] = useState<number>(2);
//   const [playLyricCount, setPlayLyricCount] = useState<number>(0);
//   const [divisor, setDivisor] = useState<number>(10);
//   const [ballPosition, setBallPosition] = useState<number>(0.5);

//   // Hz/Notes
//   const [showNotesPar, setShowNotesPar] = useState(false);

//   // selected choice
//   const [component, setComponent] = useState<string>("ConstantTxt");
//   const [currentSelection, setCurrentSelection] = useState('Constant');
//   const [syllableCount, setSyllableCount] = useState<string>("none");
//   const [baseFilenames, setBaseFilenames] = useState<string[]>([]);
//   const [fileContent, setFileContent] = useState<string[]>([]);
//   const [selectedNum, setSelectedNum] = useState<string[]>(["2"]);


//   // 





//   const setPlaying = () => {
//     setIsPlaying(true);
//   };
//   const setPlayingPause = () => {
//     setIsPlaying(false);
//   };
//   const handleBeginTour = () => {
//     setOpenTour(true);
//     window.scrollTo(0, 0);
//   };
//   const onClose = () => {
//     setOpenSetting(false);
//   };
//   const ClearTxt = () => {
//     setFileContent([]);
//     setMaxLyricCount(1);
//   };

//   // Constant Page upload and input
//   const handleTextInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
//     const content = e.target.value as string;
//     const separators = /[;,./\n]/;
//     const splitContent = content.split(separators)
//       .map(s => s.trim())
//       .filter(Boolean);
//     console.log(splitContent);
//     setFileContent(splitContent);
//     setMaxLyricCount(splitContent.length - 1);
//     setPlayLyricCount(0);
//   }
//   const props: UploadProps = {
//     name: 'file',
//     accept: '.txt, .pdf',
//     beforeUpload: (file) => {
//       if (file.type !== 'text/plain' && file.type !== 'application/pdf') {
//         message.error(`${file.name} is not a valid text/pdf file.`);
//         return false;
//       }
//       if (file.type === 'application/pdf') {
//         pdfToText(file)
//           .then((text: string) => {
//             const separators = /[;,./\n]/;
//             const splitContent = text.split(separators)
//               .map((s: string) => s.trim())
//               .filter(Boolean);
//             console.log(splitContent);
//             setFileContent(splitContent);
//             setMaxLyricCount(splitContent.length - 1);
//             setPlayLyricCount(0);
//           })
//           .catch((error: any) => { // Explicitly specify the type of 'error' parameter as 'any'
//             message.error('Error reading PDF file:', error);
//           });
//         return false;
//       }
//       if (file.type === 'text/plain') {
//         const reader = new FileReader();
//         reader.onload = (e: ProgressEvent<FileReader>) => {
//           if (e.target?.result) {
//             const content = e.target.result as string;
//             // const separators = /[;,./]/;
//             const separators = /[;,./\n]/;
//             const splitContent = content.split(separators)
//               .map(s => s.trim())
//               .filter(Boolean);
//             console.log(splitContent);
//             setFileContent(splitContent);
//             setMaxLyricCount(splitContent.length - 1);
//             setPlayLyricCount(0);
//           }
//         };

//         reader.readAsText(file);

//         return false;
//       }
//     },
//     onChange(info) {
//       if (info.file.status === 'done') {
//         message.success(`${info.file.name} file read successfully`);
//       } else if (info.file.status === 'error') {
//         message.error(`${info.file.name} file read failed.`);
//       }
//     },
//   };
//   const changeOnEnter = (e: any) => {
//     if (e.key === 'Enter' && !e.shiftKey) {
//       console.log("Enter Key Pressed!");
//       handleTextInput(e);
//     }
//   }


//   const [historyMode, setHistoryMode] = useState("None");
  
//   const [currentColorScheme, setCurrentColorScheme] = useState("blue");
//   const [LAMP_COLORS, setLAMP_COLORS] = useState<string[]>([
//     'rgb(3, 4, 242)', // low
//     'rgb(106, 0, 147)', // mid
//     'rgb(221, 0, 34)', // high
//   ]);

//   const LAMP_COLORSBLUE = [
//     'rgb(3, 4, 242)', // low
//     'rgb(106, 0, 147)', // mid
//     'rgb(221, 0, 34)', // high
//   ];

//   const LAMP_COLORSGREEN = [
//     'rgb(98, 187, 70)', // low
//     'rgb(255, 194, 14)', // mid
//     'rgb(241, 91, 64)', // high
//   ];
//   useEffect(() => {
//     if (currentColorScheme === "blue") {
//       setLAMP_COLORS(LAMP_COLORSBLUE);
//     } else {
//       setLAMP_COLORS(LAMP_COLORSGREEN);
//     }
//   }, [currentColorScheme]);


//   const getLampColor = (vol: number) => {
//     let temvol = vol + 130;
//     if (temvol <= 50) return LAMP_COLORS[0];
//     if (temvol <= 80) return LAMP_COLORS[1];
//     return LAMP_COLORS[2];
//   };
//   const lampStyle = (color: string) => ({
//     backgroundColor: color,
//     opacity: color === getLampColor(volume) ? 1 : 0.2,
//     width: '20px',
//     height: '20px',
//     borderRadius: '50%',
//     margin: '5px',
//   });

//     // Volume
//     useEffect(() => {
//       navigator.mediaDevices.getUserMedia({ audio: true, video: false })
//         .then(stream => {
//           const harkInstance = hark(stream, {});
  
//           harkInstance.on('volume_change', (volume, threshold) => {
//             setVolume(volume);
//           });
  
//           return () => harkInstance.stop();
//         })
//         .catch(error => {
//           console.error('Error accessing the microphone', error);
//         });
//     }, []);
//     useEffect(() => {
//       if (volume > threshold - 100 && enableVol) {
//         setIsPlaying(true);
//       }
//     }, [volume]);


//   // Tour
//   const steps: TourProps['steps'] = [
//     {
//       title: 'Pitch Exercises',
//       description: 'Switch between different exercises',
//       placement: 'top',
//       target: () => ref12.current,
//     },
//     {
//       title: 'Canvas Display',
//       description: 'Visualize your voice pitch and target pitch curve in real-time.',
//       placement: 'top',
//       target: () => ref1.current,
//     },
//     {
//       title: 'Function Buttons',
//       cover: (
//         <ul style={{ textAlign: 'left' }}>
//           <li>Start/Stop: Begin or stop recording.</li>
//           <li>Retry: Clear display and restart.</li>
//           <li>Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.</li>
//           <li>Previous Next (if text uploaded): Switch between lines of text.</li>
//         </ul>
//       ),
//       target: () => ref2.current,
//     },
//     {
//       title: 'Slider',
//       description: 'Use this slides to change the target pitch value that you want to aim for.',
//       target: () => parentRef.current as HTMLDivElement,
//     },
//     {
//       title: 'Options menu',
//       description: 'Adjust settings such as the pitch display range.',
//       target: () => ref3.current,
//     },

//   ];
//   useEffect(() => {
//     const queryParams = new URLSearchParams(location.search);
//     const init = queryParams.get('init');
//     if (init === 'true') {
//       handleBeginTour();
//     }
//   }, [location]);

//     // Options of different Exercise 
//     const handleStairAndConstantClick = (e: any) => {
//       setPlayLyricCount(0);
//       setCurrentSelection(e.target.innerText);
//       console.log(e.target.innerText);
//       if (e.target.innerText === "Constant" || e.target.innerText === "CONSTANT") {
//         setComponent("ConstantTxt");
//         setSelectedNum(["2"]);
  
//       } else if (e.target.innerText === "Stair" || e.target.innerText === "STAIR") {
//         setComponent("Stair");
//         setSelectedNum(["3"]);
  
//       } else {
//         setComponent("Heteronym");
//         setSelectedNum(["4"]);
//       }
//       setSyllableCount("none");
//     }

//   const handleHistoryMode = (e: any) => {
//     setHistoryMode(e.target.innerText);
//   }
//   const handleColorStyle = (e: any) => {
//     const newColorScheme = e.target.innerText.includes("Blue-Red") ? "blue" : "green";
//     setCurrentColorScheme(newColorScheme);
//   };
//   const renderTruncatedFilenames = (filenames: string[]) => {
//     return filenames.map((text, index) => {
//       const maxIndexToShow = playLyricCount + 2 >= filenames.length ? filenames.length - 1 : playLyricCount + 2;
//       const shouldShow = index >= playLyricCount && index <= maxIndexToShow;
//       const isNearEnd = filenames.length - playLyricCount <= 2;
//       const startIndex = isNearEnd ? filenames.length - 3 : playLyricCount;
//       const showCondition = index >= startIndex && index <= startIndex + 2;

//       return (
//         showCondition && (
//           <li key={index} className={playLyricCount === index ? 'highlighted' : ''}>{text}</li>
//         )
//       );
//     });
//   };
//   const handleMenuClick = (e: any) => {
//     setPlayLyricCount(0);
//     const [componentType, genderType, syllableCountType] = e.key.split('-');
//     if (componentType == "Constant") {
//       setCurrentSelection("Constant");
//     } else if (componentType == "ConstantTxt") {
//       setCurrentSelection("Constant");
//     } else if (componentType == "Stair") {
//       setCurrentSelection("Staircase");
//     } else {
//       let tt = "Syllables " + syllableCountType
//       setCurrentSelection(tt);
//       setSelectedNum(["5"]);

//     }

//     setComponent(componentType);
//     setGender(genderType);
//     setSyllableCount(syllableCountType);

//     setCurrentSelection(e.key + "syllable " + genderName);
//   };
//   const handlePlayLyricCountChange = (newCount: number) => {
//     setPlayLyricCount(newCount);
//   };


//   const onChangeStair = (e: RadioChangeEvent) => {
//     setTxtShow(e.target.value);
//     console.log(e);
//   };
//   const onChangeStairSwitch = (value: boolean) => {
//     setTxtShowSwitch(value ? 'hide' : 'show');
//     setTxtShow(value ? 'true' : 'false');
//   };

//   // const renderSelectedComponent = (): React.ReactNode => {
//   //   switch (component) {
//   //     // case 'Constant':
//   //     //   return <Constant ballPosition={ballPosition} isRetry={isRetry} setPlayingPause={setPlayingPause} setPlaying={setPlaying} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} />;
//   //     case 'ConstantTxt':
//   //       return <ConstantVol LAMP_COLORS={LAMP_COLORS} historyMode={historyMode} volume={volume} ref={parentRef} initialRange={initialRange} divisor={divisor} ballPosition={ballPosition} isRetry={isRetry} setPlayingPause={setPlayingPause} setPlaying={setPlaying} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} />;
//   //     default:
//   //       return <span>Canvas: Picture</span>;
//   //   }
//   // }

//   const renderSelectedComponent = (): React.ReactNode => {
//     switch (component) {
//       // case 'Constant':
//       //   return <Constant ballPosition={ballPosition} isRetry={isRetry} setPlayingPause={setPlayingPause} setPlaying={setPlaying} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} />;
//       case 'ConstantTxt':
//         return <ConstantTxt LAMP_COLORS={LAMP_COLORS} historyMode={historyMode} ref={parentRef} initialRange={initialRange} divisor={divisor} ballPosition={ballPosition} isRetry={isRetry} setPlayingPause={setPlayingPause} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} />;
//       case 'Stair':
//         return <Stair setShowNotesPar={setShowNotesPar} setMaxLyricCount={setMaxLyricCount} initialRange={initialRange} divisor={divisor} txtShow={txtShow} playLyricCount={playLyricCount} setPlayingPause={setPlayingPause} isRetry={isRetry} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} />;
//       case 'Heteronym':
//         return <Heteronym setMaxLyricCount={setMaxLyricCount} initialRange={initialRange} divisor={divisor} txtShow={txtShow} playLyricCount={playLyricCount} setPlayingPause={setPlayingPause} isRetry={isRetry} setPlaying={setPlaying} COLORS={COLORS} showNotesPar={showNotesPar} size={size} config={config} isPlaying={isPlaying} heteronymFile={heteronymFilenames} />;
//       default:
//         return <span>Canvas: Picture</span>;
//     }
//   }

//   const renderSelectedComponentLyric = (): React.ReactNode => {
//     switch (component) {
//       case 'ConstantTxt':
//         return (
//           <div className='lyric'>

//             <Space size="middle">
//               <Space.Compact>


//                 <Button onClick={ClearTxt} icon={<RedoOutlined />}></Button>

//                 <Upload maxCount={1} {...props}>
//                   <Button icon={<UploadOutlined />}>Upload Txt File</Button>
//                 </Upload>
//               </Space.Compact>
//             </Space>

//             <ul>
//               {fileContent.map((text, index) => {
//                 const maxIndexToShow = playLyricCount + 2 >= fileContent.length ? fileContent.length - 1 : playLyricCount + 2;

//                 const shouldShow = index >= playLyricCount && index <= maxIndexToShow;
//                 const isNearEnd = fileContent.length - playLyricCount <= 2;
//                 const startIndex = isNearEnd ? fileContent.length - 3 : playLyricCount;
//                 const showCondition = index >= startIndex && index <= startIndex + 2;

//                 return (
//                   showCondition && (
//                     <li key={index} className={playLyricCount === index ? 'highlighted' : ''}>{text}</li>
//                   )
//                 );
//               })}
//             </ul>
//           </div>
//         )
//       case 'Stair':
//         return (
//           <div className='lyric'>
//             <Radio.Group onChange={onChangeStair} defaultValue="off">
//               <Radio.Button value="true">Show</Radio.Button>
//               <Radio.Button value="false">Hide</Radio.Button>
//             </Radio.Group>
//             {(() => {
//               if (txtShow === 'true') {
//                 return (
//                   <ul>
//                     {renderTruncatedFilenames(stairFilenames)}
//                   </ul>
//                 );
//               }
//               return null;
//             })()}

//           </div>
//         )
//       case 'Heteronym':
//         return (
//           <div className='lyric'>
//             <Radio.Group onChange={onChangeStair} defaultValue="off">
//               <Radio.Button value="true">Show</Radio.Button>
//               <Radio.Button value="false">Hide</Radio.Button>
//             </Radio.Group>
//             {(() => {
//               if (txtShow === 'true') {
//                 return (
//                   <ul>
//                     {renderTruncatedFilenames(heteronymFilenames)}
//                   </ul>
//                 );
//               }
//               return null;
//             })()}

//           </div>
//         )
//       case 'Fixed':
//         return (
//           <div className='lyric'>
//             <ul>
//               {renderTruncatedFilenames(baseFilenames)}
//             </ul>
//           </div>
//         )
//       default:
//         return <span>Canvas: Picture</span>;
//     }
//   }

//   useEffect(() => {
//     if (component == "ConstantTxt" && fileContent.length === 0) {
//       setShowNextPre(false);
//       setShowListen(false);
//     } else if (component == "ConstantTxt" && fileContent.length != 0) {
//       setShowNextPre(true);
//       setShowListen(false);
//     }
//     else if (component == "Fixed") {
//       setShowNextPre(true);
//       setShowListen(true);
//     } else if (component == "Stair") {
//       setShowNextPre(true);
//       setShowListen(false);
//     } else if (component == "Heteronym") {
//       setShowNextPre(true);
//       setShowListen(false);
//     } else {
//       setShowNextPre(true);
//       setShowListen(false);
//     }
//   }
//     , [component, fileContent]);

//   useEffect(() => {

//   }, [playLyricCount]);
//   const onChangeRange = (rangeValue: number[]) => {
//     console.log(rangeValue[1]);
//     setInitialRange([rangeValue[0], rangeValue[1]]);

//   }

//   const onChangePosition = (positionValue: number) => {
//     setBallPosition(positionValue);
//   }

//   const onChangeSpeed = (speedValue: number) => {
//     const mappedValue = Math.round((speedValue * 20) + 4);
//     setDivisor(mappedValue);
//   }

//   const onChangeHz = ({ target: { value } }: RadioChangeEvent) => {
//     console.log(value);
//     if (value === 'hz') {
//       setShowNotesPar(false);
//     } else {
//       setShowNotesPar(true);
//     }
//   }

//   const EnableVoluneMode = (e: boolean) => {
//     console.log(e);
//     if (e) {
//       setEnableVol(true);

//     } else {
//       setEnableVol(false);

//     }
//   }
//   // Pause function
//   const onChangePause = () => {
//     setIsPlaying(!isPlaying);
//   }
//   const onChangePrevious = () => {
//     const tem = playLyricCount;
//     if (tem <= 0) {
//       setPlayLyricCount(0);
//     } else {
//       setPlayLyricCount(tem - 1);
//     }
//   };

//   const onChangeNext = () => {
//     const tem = playLyricCount;
//     console.log(playLyricCount);
//     if (tem >= maxLyricCount) {
//       setPlayLyricCount(maxLyricCount);
//     } else {
//       setPlayLyricCount(tem + 1);
//     }
//   };

//   const onChangeThreshold = (e: number) => {
//     setThreshold(e);
//   };
//   const formatterdB = (value: number | undefined) => `${value} dB`;
//   const formatterHz = (value: number | undefined) => `${value} Hz`;
//   const formatterPos = (value: number | undefined) => `${value ? (value * 100).toFixed(0) : '0'}%`;
//   const formatterSpd = (value: number | undefined) => {
//     if (value === undefined) {
//       return '0';
//     }
//     const mappedValue = (value - 5) * (50 / 15);
//     return `${mappedValue.toFixed(0)}`;
//   };


//   return (
//     // <div className="app-container" >
//     <Row>
//       <Col span={24}>
//         <Layout className="layoutSample">

//           <Content>

//             <Flex align="center" justify="center" gap="middle" vertical>
//               <div className="currentSelection blueFont">
//                 <p>Volume mode</p>
//               </div>
//               <div style={{ width: "100%" }}>
//                 {renderSelectedComponent()}
//               </div>
//               <Tooltip title={isPlaying ? "Pause" : "Play"}>
//                 <Button onClick={onChangePause} shape="circle" icon={isPlaying ? <PauseOutlined /> : <CaretRightOutlined />} />
//               </Tooltip>
//               <div>
//                 <div style={{ display: 'flex' }}>
//                   <div style={lampStyle(LAMP_COLORS[0])}></div>
//                   <div style={lampStyle(LAMP_COLORS[1])}></div>
//                   <div style={lampStyle(LAMP_COLORS[2])}></div>
//                 </div>
//               </div>
//               <Tooltip title="Setting">
//                 <FloatButton style={{
//                   width: 50,
//                   height: 50,
//                   display: 'flex',
//                   alignItems: 'center',
//                   justifyContent: 'center'
//                 }} onClick={showDrawer} ref={ref3} icon={<SettingOutlined />} />
//               </Tooltip>

//               <Image
//                 preview={false}
//                 src={divide_1}
//                 style={{ width: '100%' }}
//               />

//             </Flex>
//             <Drawer title="Options" placement="right" onClose={onClose} open={open} afterOpenChange={handleAfterOpenChange} width={430}>
//               <Flex vertical gap="middle">

//                 <Space>
//                   <p># Coordinate Display Mode</p>
//                   <Radio.Group onChange={onChangeHz} defaultValue="notes" buttonStyle="solid">
//                     <Radio.Button value="hz"> Hz </Radio.Button>
//                     <Radio.Button value="notes">Notes</Radio.Button>
//                   </Radio.Group>
//                 </Space>

//                 <Space>
//                   <p># History Mode Selection: </p>
//                 </Space>
//                 <Space>
//                   <Button type={historyMode === 'Size' ? 'primary' : 'default'} onClick={handleHistoryMode}>Size</Button>
//                   <Button type={historyMode === 'Color' ? 'primary' : 'default'} onClick={handleHistoryMode}>Color</Button>
//                   <Button type={historyMode === 'Mixed' ? 'primary' : 'default'} onClick={handleHistoryMode}>Mixed</Button>
//                   <Button type={historyMode === 'None' ? 'primary' : 'default'} onClick={handleHistoryMode}>None</Button>
//                 </Space>

//                 <Space>
//                   <p># Color Mode</p>

//                 </Space>
//                 <Space>
//                   <Button onClick={handleColorStyle} type={currentColorScheme === "blue" ? 'primary' : 'default'}>Blue-Red</Button>
//                   <Button onClick={handleColorStyle} type={currentColorScheme === "green" ? 'primary' : 'default'}>Green-Red</Button>
//                 </Space>

//                 <div>
//                   <p># Pitch Display Range</p>
//                   <Slider
//                     range
//                     step={10}
//                     min={50}
//                     max={600}
//                     onChange={onChangeRange}
//                     // tooltipPlacement={bottom}
//                     // tooltip ={{formatter: null}}
//                     tooltip={{ formatter: formatterHz }}
//                     marks={marksRange}
//                     defaultValue={[100, 300]} />
//                 </div>


//                 {component !== "Fixed" && component !== "Stair" && (
//                   <div>
//                     <p># Pitch Indicator Horizontal Position</p>
//                     <Slider
//                       step={0.1}
//                       min={0}
//                       max={1}
//                       onChange={onChangePosition}
//                       tooltip={{ formatter: formatterPos }}
//                       // tooltip ={{formatter: null}}
//                       defaultValue={0.5}
//                       marks={marksBallPos}
//                     />
//                   </div>
//                 )}


//                 {component !== "Fixed" && component !== "Stair" && component !== "Heteronym" && (
//                   <div>
//                     <p># Pitch Indicator Horizontal Position</p>
//                     <Slider
//                       step={0.1}
//                       min={0}
//                       max={1}
//                       onChange={onChangePosition}
//                       // tooltip={{ formatter: formatterPos }}
//                       // tooltip ={{formatter: null}}
//                       tooltip={{
//                         // placement: 'bottom',
//                         formatter: formatterPos,
//                         // open: tooltipVisible,
//                       }}
//                       defaultValue={0.5}
//                       marks={marksBallPos}
//                     />
//                   </div>
//                 )}

//                 <div>
//                   <p># Pitch Indicator Speed</p>
//                   <Slider
//                     step={0.05}
//                     min={0}
//                     max={1}
//                     onChange={onChangeSpeed}
//                     // tooltip={{ formatter: formatterPos }}
//                     tooltip={{
//                       // placement: 'bottom',
//                       formatter: formatterPos,
//                     }}
//                     defaultValue={0.3}
//                   // tooltip ={{formatter: null}}
//                   // marks={marksBall}
//                   />
//                 </div>

//                 <div>
//                   <Space>
//                     <p># Auto-Start When Voice Detected</p>
//                     <Switch defaultChecked={false} onChange={EnableVoluneMode} />
//                   </Space>

//                   {enableVol &&
//                     <Slider
//                       step={1}
//                       min={50}
//                       max={90}
//                       onChange={onChangeThreshold}
//                       tooltip={{
//                         // placement: 'bottom',
//                         formatter: formatterdB,
//                         // open: tooltipVisible,

//                       }}
//                       defaultValue={70}
//                       marks={marksVol}
//                     />
//                   }
//                 </div>

//                 <br />
//                 <Button onClick={onClose}>Close</Button>
//               </Flex>


//             </Drawer>
//           </Content>
//         </Layout>

//       </Col>
//     </Row>

//     // </div>
//   );
// }

// export default SampleVolume;

import React from 'react';

const PlaceholderComponent: React.FC = () => {
  return null;
};

export default PlaceholderComponent;