import { MessageBubble } from '.';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var meta = {
  title: 'Components/MessageBubble',
  tags: ['autodocs'],
  component: MessageBubble,
  args: {
    styles: {
      display: 'flex'
    },
    role: 'host',
    msg: 'Hello World!',
    isSelf: false
  },
  argTypes: {}
};
export var Doc = function Doc(props) {
  var role = props.role,
    msg = props.msg,
    isSelf = props.isSelf;
  var handleSelect = function handleSelect(val) {
    alert('Copied value: ' + val);
  };
  var customMsg_1 = 'Hello World!';
  var customMsg_2 = 'Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World Hello Wor';
  return /*#__PURE__*/_jsxs("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      padding: 50,
      border: 'solid 0.5px #e5e7eb'
    },
    children: [/*#__PURE__*/_jsxs("div", {
      style: {
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Basic:", /*#__PURE__*/_jsx(MessageBubble, {
        role: role,
        msg: msg,
        isSelf: isSelf
      })]
    }), "Please Change Properties:", /*#__PURE__*/_jsxs("div", {
      style: {
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Change role to \"other\": \"(direction is the right, embed false)\"", /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_1,
          onCopy: handleSelect
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Change isSelf to \"true\": \"(direction is the left, embed false)\"", /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsx(MessageBubble, {
          isSelf: true,
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_1,
          onCopy: handleSelect
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Change role to \"other\": \"(direction is the right, embed true)\"", /*#__PURE__*/_jsx("div", {
        style: {
          display: 'flex'
        },
        children: /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_2,
          onCopy: handleSelect
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Change isSelf to \"true\": \"(direction is the left, embed true)\"", /*#__PURE__*/_jsx("div", {
        style: {
          display: 'flex'
        },
        children: /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          isSelf: true,
          msg: customMsg_2,
          onCopy: handleSelect
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        padding: '50px 50px 0',
        border: 'solid 0.5px #e5e7eb',
        width: 320,
        maxWidth: 620,
        minWidth: 320,
        marginBottom: 50
      },
      children: ["Message Use Margin & the last one has no margin", /*#__PURE__*/_jsxs("div", {
        style: {
          display: 'flex',
          flexDirection: 'column',
          flex: 1
        },
        children: [/*#__PURE__*/_jsx(MessageBubble, {
          role: 'host',
          marginBottom: "large"
        }), /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_1,
          marginBottom: "small",
          onCopy: handleSelect
        }), /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_1 + customMsg_1 + customMsg_1,
          marginBottom: "large",
          onCopy: handleSelect
        }), /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          isSelf: true,
          msg: customMsg_1 + customMsg_1,
          marginBottom: "small",
          onCopy: handleSelect
        }), /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          isSelf: true,
          msg: customMsg_1 + customMsg_1 + customMsg_1,
          marginBottom: "large",
          onCopy: handleSelect
        }), /*#__PURE__*/_jsx(MessageBubble, {
          styles: {
            position: 'relative'
          },
          role: 'participant',
          msg: customMsg_1,
          onCopy: handleSelect
        })]
      })]
    })]
  });
};
export default meta;