import {
  Card,
  Select,
  InputNumber,
  Button,
  Switch,
  Carousel,
  Row,
  Col,
  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,
  setIsAECEnabled,
} from '@/states/exam/aprSlice';
import ParaSettingCoordinator from '@/domain/exam/paraSettingCoordinator';

const ContentAreaSmall = ({ className }: { className?: string }) => {
  const dispatch = useDispatch();
  const aprConfig = useSelector((state: RootState) => state.apr.aprConfig);
  const currentExposureMode = useSelector(
    (state: RootState) => state.apr.currentExposureMode
  );
  const isAECEnabled = useSelector(
    (state: RootState) => state.apr.isAECEnabled
  );

  const handleExposureModeChange = (value: string) => {
    ParaSettingCoordinator.setExposureMode(value);
  };

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

  console.log('ContentAreaSmall component rendered');
  console.log('ContentAreaSmall component rendered');
  return (
    <Carousel
      autoplay={false}
      effect="fade"
      adaptiveHeight={true}
      className={`w-full max-w-[800px] h-full ${className}`}
    >
      <div className="h-full">
        <Card title="体位列表">体位列表</Card>
      </div>
      <div>
        <Card title="体位详情">体位详情</Card>
      </div>
      <div>
        <Row gutter={16} align="middle">
          <Col span={9}>
            <Select
              placeholder="选择体型"
              style={{ width: '100%', marginBottom: 8 }}
            >
              {Object.entries(patientSizes).map(
                ([key, value]: [string, string]) => (
                  <Select.Option key={key} value={key}>
                    {value}
                  </Select.Option>
                )
              )}
            </Select>
          </Col>
          <Col span={15}>
            <Select
              placeholder="选择工作位"
              style={{ width: '100%', marginBottom: 8 }}
            >
              {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>
          <Tooltip
            title={
              currentExposureMode === 'mAs'
                ? '当前为 mAs 模式，mA 和 ms 不可调整'
                : ''
            }
          >
            <InputNumber
              disabled={currentExposureMode === 'mAs'}
              placeholder={currentExposureMode === 'mAs' ? '--' : 'mA'}
              style={{ width: '100%', marginBottom: 8 }}
              value={
                currentExposureMode === 'mAs'
                  ? null
                  : (aprConfig.mA ?? undefined)
              }
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, mA: value ?? 0 }))
              }
            />
          </Tooltip>
          <Tooltip
            title={
              currentExposureMode === 'mAs'
                ? '当前为 mAs 模式，mA 和 ms 不可调整'
                : ''
            }
          >
            <InputNumber
              disabled={currentExposureMode === 'mAs'}
              placeholder={currentExposureMode === 'mAs' ? '--' : 'ms'}
              style={{ width: '100%', marginBottom: 8 }}
              value={
                currentExposureMode === 'mAs'
                  ? null
                  : (aprConfig.ms ?? undefined)
              }
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, ms: value ?? 0 }))
              }
            />
          </Tooltip>
          <Tooltip
            title={
              currentExposureMode === 'time'
                ? '当前为 time 模式，mAs 不可调整'
                : ''
            }
          >
            <InputNumber
              disabled={currentExposureMode === 'time'}
              placeholder={currentExposureMode === 'time' ? '--' : 'mAs'}
              style={{ width: '100%', marginBottom: 8 }}
              value={
                currentExposureMode === 'time'
                  ? null
                  : (aprConfig.mAs ?? undefined)
              }
              onChange={(value) =>
                dispatch(setAprConfig({ ...aprConfig, mAs: value ?? 0 }))
              }
            />
          </Tooltip>
          <InputNumber
            placeholder="KV"
            style={{ width: '100%', marginBottom: 8 }}
          />
          <InputNumber
            placeholder="density"
            style={{ width: '100%', marginBottom: 8 }}
          />
        </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>
      </div>
    </Carousel>
  );
};

export default ContentAreaSmall;