/** @jsxRuntime classic */
/** @jsx jsx */
import React, { FunctionComponent } from 'react';
import { jsx, css } from '@emotion/react';
import styled from '@emotion/styled';

type EmotionStyledProps = {
  label?: string;
  isMarked?: boolean;
};

const basicStyles = css`
  border: 2px dotted red;
`;

const demoStyles = css`
  border: 2px dashed rebeccapurple;
`;

const EmotionStyled: FunctionComponent<EmotionStyledProps> = ({ label = 'default label', isMarked = false }) => {
  const evaluateDemoStylesEmotion = () => (isMarked ? basicStyles : demoStyles);

  const styles = css`
    color: hotpink;
    ${evaluateDemoStylesEmotion()}
    &:hover {
      color: ${isMarked ? '#FFFFFF' : '#333333'};
      background: ${isMarked ? 'darkcyan' : 'lightsalmon'};
    }
  `;

  const TextStyled = styled.p`
    color: hotpink;
    &:hover {
      background: ${isMarked ? 'darkcyan' : 'lightsalmon'};
    }
  `;

  const anotherStyle = css({
    textDecoration: 'underline',
    '&:hover': {
      fontSize: '30px',
    },
  });

  const onClickHandler = () => {
    console.log('clickedddd');
  };

  return (
    <div onClick={onClickHandler}>
      <p css={anotherStyle}>Emotioned: {label}</p>
      <TextStyled>{isMarked ? 'Marked' : 'Not Marked'}</TextStyled>
      <h3 css={styles}>{isMarked ? 'Marked' : 'Not Marked'}</h3>
    </div>
  );
};

export default EmotionStyled;