import { Button, Card, Form, Input, Layout, Radio, theme } from "antd";
import { useState } from "react";

const { Content, Sider } = Layout;

const Spectrum = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const [form] = Form.useForm();
  const [mode, setMode] = useState('Angle');

  const initialValues = {
    mode: "Angle",
  };

  const onFormChange = ({ mode }) => {
    setMode(mode);
  };

  const angleForm = (
    <Form
      form={form}
      onValuesChange={onFormChange}
      initialValues={initialValues}
      layout="horizontal"
      size="small"
    >
      <Form.Item label="Mode" name="mode">
        <Radio.Group value={mode}>
          <Radio.Button value="Angle">Angle</Radio.Button>
          <Radio.Button value="Wavelength">Wavelength</Radio.Button>
        </Radio.Group>
      </Form.Item>

      <Form.Item label={`Target ${mode} (${mode == "Angle" ? '°' : 'Å'})`}>
        <Input placeholder="30.127" />
      </Form.Item>
    </Form>
  );

  return (
    <Layout style={{ height: 500 }}>
      <Content>
        <h2>kk eae men</h2>
      </Content>

      <Sider width={300} style={{ background: colorBgContainer }}>
        <Card
          title="Motor control"
          size="small"
          actions={[
            <Button type="primary" key='sendAngle' size="small" ghost>
              Send
            </Button>
          ]}
        >
          {angleForm}
        </Card>
      </Sider>
    </Layout>
  )
};

export default Spectrum;