import {
  Row,
  Col,
  Card,
  Select,
  InputNumber,
  Button,
  Switch,
  Tooltip,
  Divider,
} 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';

const ContentAreaMedium = () => {
  return (
    <Row gutter={16}>
      <Col span={16}>
        <Card title="体位区">
          <Row gutter={16}>
            <Col span={24} style={{ height: 50 }}>
              <Card title="体位列表">体位列表</Card>
            </Col>
            <Col span={24}>
              <Card title="体位详情">体位详情</Card>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span={8}>
        <Card>
          <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>
            <InputNumber
              placeholder="mA"
              style={{ width: '100%', marginBottom: 8 }}
            />
            <InputNumber
              placeholder="ms"
              style={{ width: '100%', marginBottom: 8 }}
            />
            <InputNumber
              placeholder="mAs"
              style={{ width: '100%', marginBottom: 8 }}
            />
            <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%' }}>
                <Select.Option value="mAs">mAs</Select.Option>
                <Select.Option value="time">time</Select.Option>
              </Select>
            </Col>
            <Col span={9}>
              <Switch
                checkedChildren="开启AEC"
                unCheckedChildren="关闭AEC"
                defaultChecked
              />
            </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 ContentAreaMedium;