import { useParams } from 'react-router';
import { Typography } from 'antd';
import MultiLineInputBox from '../components/MultiLineInputBox';
import RadioGroupFormField from '../components/RadioGroupFormField';
import TextAreaFormField from '../components/TextAreaFormField';
import PhotoList from '../components/PhotoList';
import { mockPhotos } from '../pages/demos/PhotoListExample';

// Use `Typography` so can apply dark theme to text
import { jsx as _jsx } from "react/jsx-runtime";
const {
  Text
} = Typography;
export const RadioGroupFormFieldDemo = () => {
  const column = {
    id: 'maleOrFemale',
    name: 'Male or Female',
    type: 'STRING',
    'type:createUpdatePage': 'RadioGroup',
    'ui:createUpdatePage:enum': ['male', 'female']
  };
  return /*#__PURE__*/_jsx(RadioGroupFormField, {
    disabled: false,
    column: column,
    value: "male",
    onChange: () => {}
  });
};
export const TextAreaFormFieldDemo = () => {
  const column = {
    id: 'notes',
    name: 'Notes',
    type: 'STRING',
    'type:createUpdatePage': 'TextArea'
  };
  return /*#__PURE__*/_jsx(TextAreaFormField, {
    label: column.name,
    rows: 2,
    disabled: false,
    value: "Take a note",
    onChange: () => {}
  }, column.id);
};
export const MultiLineInputBoxDemo = () => {
  // const column = {
  //   id: 'photoUrls',
  //   name: 'Photo URLs',
  //   type: 'STRING_ARRAY',
  //   'type:createUpdatePage': 'MultiLineInputBox'
  // };

  return /*#__PURE__*/_jsx(MultiLineInputBox, {
    rows: 2,
    disabled: false,
    value: ['https://example.com/photo1.jpg', 'https://example.com/photo2.jpg'],
    onChange: () => {}
  });
};
export const PhotoListDemo = () => {
  return /*#__PURE__*/_jsx(PhotoList, {
    photos: mockPhotos
  });
};
export const ComponentDemoRouter = ({
  componentName
}) => {
  // render different component based on the component name
  const demoMap = {
    RadioGroup: /*#__PURE__*/_jsx(RadioGroupFormFieldDemo, {}),
    TextArea: /*#__PURE__*/_jsx(TextAreaFormFieldDemo, {}),
    MultiLineInputBox: /*#__PURE__*/_jsx(MultiLineInputBoxDemo, {}),
    PhotoList: /*#__PURE__*/_jsx(PhotoListDemo, {})
  };
  if (!Object.keys(demoMap).includes(componentName)) {
    return /*#__PURE__*/_jsx(Text, {
      children: "Component not found"
    });
  }
  return /*#__PURE__*/_jsx("div", {
    className: "dbm-component-demo-router",
    children: demoMap[componentName]
  });
};
const ComponentDemo = () => {
  const params = useParams();
  if (params.component === undefined) {
    return /*#__PURE__*/_jsx(Text, {
      children: "Component is required"
    });
  }
  if (!['RadioGroup'].includes(params.component)) {
    return /*#__PURE__*/_jsx(Text, {
      children: "Component not found"
    });
  }
  return /*#__PURE__*/_jsx("div", {
    className: "dbm-component-demo",
    children: /*#__PURE__*/_jsx(ComponentDemoRouter, {
      componentName: params.component
    })
  });
};
export default ComponentDemo;
//# sourceMappingURL=ComponentDemo.js.map