import React from 'react';
import Radio from '../../radio';
import Row from '../../row';
import Col from '../../col';
import LabelInput from './label-input';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const cropperRatio = [{
  label: '16:9',
  value: 16 / 9
}, {
  label: '4:3',
  value: 4 / 3
}, {
  label: '1:1',
  value: 1
}, {
  label: '自定义',
  value: 0
}];
const CropperToolbar = ({
  onHeightChange,
  onRatioChange,
  onWidthChange,
  width,
  height,
  ratio,
  extra
}) => {
  return /*#__PURE__*/_jsxs(Row, {
    className: "wii-cropper-toolbar",
    gutter: 16,
    wrap: false,
    justify: "space-between",
    children: [/*#__PURE__*/_jsx(Col, {
      flex: 1,
      children: /*#__PURE__*/_jsxs(Row, {
        gutter: 16,
        wrap: false,
        children: [/*#__PURE__*/_jsx(Col, {
          children: /*#__PURE__*/_jsx(Radio.Group, {
            optionType: "button",
            options: cropperRatio,
            value: ratio,
            onChange: e => {
              onRatioChange(e.target.value);
            },
            buttonStyle: "solid"
          })
        }), /*#__PURE__*/_jsx(Col, {
          children: /*#__PURE__*/_jsxs(Row, {
            gutter: 8,
            wrap: false,
            children: [/*#__PURE__*/_jsx(Col, {
              span: 12,
              children: /*#__PURE__*/_jsx(LabelInput, {
                label: "\u5BBD\u5EA6",
                id: "width",
                value: width,
                onChange: val => {
                  onWidthChange(val);
                }
              })
            }), /*#__PURE__*/_jsx(Col, {
              span: 12,
              children: /*#__PURE__*/_jsx(LabelInput, {
                label: "\u9AD8\u5EA6",
                id: "height",
                value: height,
                onChange: val => {
                  onHeightChange(val);
                }
              })
            })]
          })
        })]
      })
    }), extra ? /*#__PURE__*/_jsx(Col, {
      className: "wii-cropper-toolbar-extra",
      children: extra
    }) : null]
  });
};
export default CropperToolbar;