import React, { useState, useEffect,useRef } from 'react';
import PitchDetector from './PitchDetector';
import PitchCanvas from './PitchCanvas';
import PitchCanvasCustom from './PitchCanvasCustom';
import { Button, Flex, Segmented } from 'antd';
import type { FlexProps } from 'antd';
import type { SegmentedProps } from 'antd/es/segmented';
import { PoweroffOutlined, PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { Layout, Space, Card } from 'antd';
import { Col, Row } from 'antd';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
import { Slider } from 'antd';
import './CSS/training.css';

const { Header, Footer, Sider, Content } = Layout;

type MenuItem = Required<MenuProps>['items'][number];
const items: MenuProps['items'] = [
    getItem('slider', '1'),
  
    getItem('Default', 'sub1', null, [
        getItem('Option 5', '2'),
      ]),
  ];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }
const headerStyle: React.CSSProperties = {
textAlign: 'center',
color: '#fff',
height: 94,
paddingInline: 50,
lineHeight: '64px',
backgroundColor: '#7dbcea',
};

const contentStyle: React.CSSProperties = {
// textAlign: 'center',
minHeight: 720,
lineHeight: '20px',
marginLeft: '0.2rem',
// color: '#fff',
// backgroundColor: '#108ee9',
};

const siderStyle: React.CSSProperties = {
textAlign: 'center',
lineHeight: '120px',
color: '#fff',
backgroundColor: '#3ba0e9',
};

const footerStyle: React.CSSProperties = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#7dbcea',
};


function map(value: number | null, in_min: number, in_max: number, out_min: number, out_max: number): number {
    if (value === null) {
        value = 0;
    }
    return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
const boxStyle: React.CSSProperties = {
    width: '100%',
    height: 170,
    borderRadius: 6,
    // border: '1px solid #40a9ff',
  };
const justifyOptions = [
    'flex-start',
    'center',
    'flex-end',
    'space-between',
    'space-around',
    'space-evenly',
  ];
  
const alignOptions = ['flex-start', 'center', 'flex-end'];
  
function PitchPanel() {
    const [parentPitchValue, setParentPitchValue] = useState<number | null>(null);
    const [pitchArray, setPitchArray] = useState<number[]>([]);
    const size = [500,1000]
    const [ballHistory, setBallHistory] = useState<number[]>([]);    
    const [isPlaying, setIsPlaying] = useState(false);
    const isPlayingRef = useRef(isPlaying);
    const [customGapSize, setCustomGapSize] = React.useState<number>(0);
    isPlayingRef.current = isPlaying; 
    const [selectedMenuItem, setSelectedMenuItem] = useState<string | null>("1");
    const [inputValue, setInputValue] = useState(1);
    const config = {
        SRATE: 48000,
        fxmin: 50,
        fxlow: 100,
        fxhigh: 400,
        fxmax: 600
    };
    // const { SRATE, fxmin, fxlow, fxhigh, fxmax } = config;
    const onClick: MenuProps['onClick'] = (e) => {
        // console.log(e.key)
        setSelectedMenuItem(e.key); 
    };


    const handlePlayPauseClick = () => {
        setIsPlaying(prevIsPlaying => {
            return !prevIsPlaying; 
        });
    };
    const onChange = (newValue: number) => {
        setInputValue(newValue);
      };
    // first
    useEffect(() => {
        console.log("first mount")

    }, []); 

    return (
        <div className="app-container">
        <Layout hasSider>
            <Content style={contentStyle}>
                <Flex vertical gap={customGapSize} style={boxStyle} justify={"flex-start"} align={"flex-start"}>
                    <PitchDetector isPlaying={isPlaying} config={config} onBallHistoryChange={setBallHistory} onPitchChange={setParentPitchValue} size={size} />
                    <Button  onClick={handlePlayPauseClick} type="primary">
                    {isPlaying ? <PauseCircleFilled /> : <PlayCircleFilled />}
                        {isPlaying ? 'Pause' : 'Start'}
                    </Button>
                    <div>{isPlaying ? 'True' : 'False'}</div>
                    <div style={{ width: '10%', minHeight: "40px", border: '1px solid red' }} >
                    {selectedMenuItem === '1' && 
                    <Slider 
                    min={config.fxmin+2} 
                    max={config.fxmax} 
                    onChange={onChange} 
                    // style={{ width: '10%', height: "80px" }} 
                    defaultValue={config.fxmin+2} />
                    }
                    </div>  

                    {selectedMenuItem === '1' && <PitchCanvasCustom inputValue={inputValue} config={config} isPlaying={isPlaying} ballHistory={ballHistory} pitchValue={parentPitchValue} targetPitch={pitchArray} size={size} />}
                    {selectedMenuItem === '2' && <PitchCanvas config={config} isPlaying={isPlaying} ballHistory={ballHistory} pitchValue={parentPitchValue} targetPitch={pitchArray} size={size} />}
                    <h1>11111</h1>
                </Flex>
            </Content>
            <Sider style={siderStyle}>
                <Menu
                    onClick={onClick}
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={items}
                    />
            </Sider>
        </Layout>


        </div>
    );
}

export default PitchPanel;