import React from 'react';
import { Tooltip } from '../src/lib/components/tooltip/Tooltip.component';
import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
import { Wrapper, Title, SubTitle } from './common';
import { placementOptions } from './controls';

export default {
  title: 'Components/Feedback/Tooltip',
  component: Tooltip,
  argTypes: {
    placement: {
      options: placementOptions,
    },
  },
};
export const Playground = {
  render: (args) => {
    return (
      <Wrapper
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Tooltip overlay="You can play with me" {...args}>
          <SubTitle>
            Hover here <br />
            to see <br /> the tooltip !
          </SubTitle>
        </Tooltip>
      </Wrapper>
    );
  },
};
export const DifferentsPlacements = {
  render: () => {
    return (
      <Wrapper
        style={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <div>
          <Title>Default Tooltip</Title>
          <Tooltip overlay="Hellooooo">
            <SubTitle>Hover here!</SubTitle>
          </Tooltip>
        </div>

        <div>
          <Title>Tooltip right</Title>
          <Tooltip placement="right" overlay="Helloooooo">
            <SubTitle>Hover here!</SubTitle>
          </Tooltip>
        </div>
        <div
          style={{
            marginLeft: '100px',
          }}
        >
          <Title>Tooltip left</Title>
          <Tooltip placement="left" overlay="Helloooooo">
            <SubTitle>Hover here!</SubTitle>
          </Tooltip>
        </div>
        <div>
          <Title>Tooltip bottom</Title>
          <Tooltip placement="bottom" overlay="Helloooooo">
            <SubTitle>Hover here!</SubTitle>
          </Tooltip>
        </div>
        <div></div>
      </Wrapper>
    );
  },
};

export const CustomizeTooltip = {
  render: () => {
    return (
      <Wrapper>
        <Tooltip
          placement="right"
          overlayStyle={{
            backgroundColor: 'green',
            fontSize: '20px',
            width: '120px',
          }}
          overlay="Helloooooo"
        >
          <SubTitle>Hover here!</SubTitle>
        </Tooltip>
      </Wrapper>
    );
  },
};

export const TooltipOnButton = {
  render: () => (
    <Wrapper
      style={{
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div>
        <Title>Tooltip with button</Title>
        <Button
          icon={<i className="fas fa-trash" />}
          label=""
          tooltip={{
            placement: 'top',
            overlay: `Hello, this is the button tooltip!`,
            overlayStyle: { width: '8rem' },
          }}
        />
      </div>
      <div>
        <Title>Tooltip with disabled button</Title>
        <Button
          disabled={true}
          icon={<i className="fas fa-trash" />}
          label=""
          tooltip={{
            placement: 'top',
            overlay: `You can't delete it :(`,
            overlayStyle: { width: '8rem' },
          }}
        />
      </div>
    </Wrapper>
  ),
};

export const YouCanAlsoAddIcon = {
  render: () => {
    return (
      <Wrapper>
        <div>
          <Title>Add icon in the overlay of tooltip</Title>
          <Tooltip
            placement="bottom"
            overlay={
              <div>
                <i className="far fa-smile"></i>Helloooooooo
              </div>
            }
          >
            <SubTitle>tooltip with icon</SubTitle>
          </Tooltip>
        </div>
      </Wrapper>
    );
  },
};

export const WithoutOverlay = {
  render: () => {
    return (
      <div>
        <Title>A Tooltip whitout overlay doesn't trigger</Title>
        <Tooltip placement="bottom">
          <SubTitle>Hover here!</SubTitle>
        </Tooltip>
      </div>
    );
  },
};


export const LongWordOverflow = {
  render: () => {
    return (
      <Wrapper>
        <div style={{ display: 'flex', gap: '4rem' }}>
          <div>
            <SubTitle>Long endpoint URL</SubTitle>
            <Tooltip overlay="https://s3.us-east-1.amazonaws.com/my-very-long-bucket-name/path/to/some/deeply/nested/object-key.tar.gz">
              <SubTitle>Hover here!</SubTitle>
            </Tooltip>
          </div>
          <div>
            <SubTitle>Normal text (still wraps at word boundaries)</SubTitle>
            <Tooltip overlay="This is a longer tooltip message that should wrap naturally at word boundaries without breaking mid-word.">
              <SubTitle>Hover here!</SubTitle>
            </Tooltip>
          </div>
        </div>
      </Wrapper>
    );
  },
};