import {
  Row,
  Col,
  Card,
  Select,
  InputNumber,
  Button,
  Switch,
  Divider,
  Tooltip,
} from 'antd';
import {
  DeleteOutlined,
  CopyOutlined,
  SaveOutlined,
  CameraOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import { patientSizes } from '../../states/patientSize';
import { WorkstationTypeLabels } from '../../states/workstation';
import { FormattedMessage } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../../states/store';
import {
  setAprConfig,
  setBodysize,
  setWorkstation,
  setIsAECEnabled,
  setCurrentExposureMode,
} from '../../states/exam/aprSlice';
import BodyPositionList from './components/BodyPositionList';
import BodyPositionDetail from './components/BodyPositionDetail';

const ContentAreaLarge = () => {
  const dispatch = useDispatch();
  const aprConfig = useSelector((state: RootState) => state.apr.aprConfig);
  const bodysize = useSelector((state: RootState) => state.apr.bodysize);
  const workstation = useSelector((state: RootState) => state.apr.workstation);
  const isAECEnabled = useSelector(
    (state: RootState) => state.apr.isAECEnabled
  );
  const currentExposureMode = useSelector(
    (state: RootState) => state.apr.currentExposureMode
  );

  const handleBodysizeChange = (value: string) => {
    dispatch(setBodysize(value));
  };

  const handleWorkstationChange = (value: string) => {
    dispatch(setWorkstation(value));
  };

  const handleAECChange = (checked: boolean) => {
    dispatch(setIsAECEnabled(checked));
  };

  const handleExposureModeChange = (value: string) => {
    dispatch(setCurrentExposureMode(value));
  };

  return (
    <Row>
      <Col span={16}>
        <Card>
          <Row gutter={16}>
            <Col span={6}>
              <BodyPositionList layout="vertical"></BodyPositionList>
            </Col>
            <Col span={18}>
              <Card>
                <BodyPositionDetail />
              </Card>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span={8}>
        <Card>
          <Row gutter={16} align="middle">
            <Col span={9}>
              <Select
                placeholder="选择体型"
                style={{ width: '100%', marginBottom: 8 }}
                value={bodysize}
                onChange={handleBodysizeChange}
              >
                {Object.entries(patientSizes).map(
                  ([key, value]: [string, string]) => (
                    <Select.Option key={key} value={key}>
                      <FormattedMessage id={value} />
                    </Select.Option>
                  )
                )}
              </Select>
            </Col>
            <Col span={15}>
              <Select
                placeholder="选择工作位"
                style={{ width: '100%', marginBottom: 8 }}
                value={workstation}
                onChange={handleWorkstationChange}
              >
                {Object.entries(WorkstationTypeLabels).map(
                  ([key, value]: [string, string]) => (
                    <Select.Option key={key} value={value}>
                      <FormattedMessage
                        id={`workstation.${key.toLowerCase()}`}
                      />
                    </Select.Option>
                  )
                )}
              </Select>
            </Col>
          </Row>
          <div>
            <InputNumber
              placeholder="mA"
              style={{ width: '100%', marginBottom: 8 }}
              value={aprConfig.mA ?? undefined}
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, mA: value ?? 0 }))
              }
            />
            <InputNumber
              placeholder="ms"
              style={{ width: '100%', marginBottom: 8 }}
              value={aprConfig.ms ?? undefined}
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, ms: value ?? 0 }))
              }
            />
            <InputNumber
              placeholder="mAs"
              style={{ width: '100%', marginBottom: 8 }}
              value={aprConfig.mAs ?? undefined}
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, mAs: value ?? 0 }))
              }
            />
            <InputNumber
              placeholder="KV"
              style={{ width: '100%', marginBottom: 8 }}
              value={aprConfig.kV ?? undefined}
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, kV: value ?? 0 }))
              }
            />
            <InputNumber
              placeholder="density"
              style={{ width: '100%', marginBottom: 8 }}
              value={aprConfig.AECDensity ?? undefined}
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, AECDensity: value ?? 0 }))
              }
            />
          </div>
          <Row gutter={16} align="middle">
            <Col span={12}>
              <Select
                placeholder="选择曝光模式"
                style={{ width: '100%' }}
                value={currentExposureMode}
                onChange={handleExposureModeChange}
              >
                <Select.Option value="mAs">mAs</Select.Option>
                <Select.Option value="time">time</Select.Option>
              </Select>
            </Col>
            <Col span={9}>
              <Switch
                checkedChildren="开启AEC"
                unCheckedChildren="关闭AEC"
                checked={isAECEnabled}
                onChange={handleAECChange}
              />
            </Col>
            <Col span={3}>
              <Button
                type="primary"
                style={{ width: '100%' }}
                icon={<DeleteOutlined />}
                title="重置参数"
              />
            </Col>
          </Row>
          <Divider />
          <Row gutter={16} align="middle">
            <Col span={4}>
              <Tooltip title="删除选择的体位">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="复制选择的体位">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CopyOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="保存参数">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<SaveOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="打开/关闭摄像头">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CameraOutlined />}
                />
              </Tooltip>
            </Col>
            <Col span={4}>
              <Tooltip title="拒绝">
                <Button
                  type="primary"
                  style={{ width: '100%' }}
                  icon={<CloseOutlined />}
                />
              </Tooltip>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
  );
};

export default ContentAreaLarge;