import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default function LogoContainer({
  logo,
  name = '',
  subname = '',
  previousData = {
    logo: '',
    name: '',
    subname: ''
  },
  ...rest
}) {
  let logoEle = /*#__PURE__*/_jsx(LogoImg, {
    logo: logo
  });
  let nameEle = name;
  let subnameEle = subname;
  if (previousData.logo) {
    logoEle = /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(LogoImg, {
        logo: logo,
        className: "left-fade-in-ele"
      }), /*#__PURE__*/_jsx(LogoImg, {
        logo: previousData.logo,
        className: "postion-abs left-fade-out-ele"
      })]
    });
  }
  if (previousData.name && previousData.name !== name) {
    nameEle = /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("span", {
        className: "right-fade-in-ele",
        style: {
          display: 'inline-block'
        },
        children: name
      }), /*#__PURE__*/_jsx("span", {
        className: "postion-abs right-fade-out-ele",
        children: previousData.name
      })]
    });
  }
  if (previousData.subname && previousData.subname !== subname) {
    subnameEle = /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("span", {
        className: "right-fade-in-ele",
        style: {
          display: 'inline-block'
        },
        children: subname
      }), /*#__PURE__*/_jsx("span", {
        className: "postion-abs right-fade-out-ele",
        children: previousData.subname
      })]
    });
  }
  return /*#__PURE__*/_jsx(Container, {
    ...rest,
    children: /*#__PURE__*/_jsxs("div", {
      className: "logo-inner",
      children: [/*#__PURE__*/_jsx("div", {
        className: "logo-img-content",
        children: logoEle
      }), /*#__PURE__*/_jsxs("div", {
        className: `logo-info ${!name && !subname ? 'zero-left' : ''}`,
        children: [/*#__PURE__*/_jsx("div", {
          className: "logo-name",
          children: nameEle
        }), /*#__PURE__*/_jsx("div", {
          className: "logo-subname",
          children: subnameEle
        })]
      })]
    })
  });
}
LogoContainer.propTypes = {
  logo: PropTypes.element.isRequired,
  name: PropTypes.string,
  subname: PropTypes.string,
  previousData: PropTypes.object
};

// eslint-disable-next-line react/prop-types
function LogoImg({
  logo,
  ...rest
}) {
  return /*#__PURE__*/_jsx(LogoImgDiv, {
    ...rest,
    children: logo
  });
}
const LogoImgDiv = styled.div`
  display: block;
  > * {
    display: block;
  }
`;
const Container = styled.div`
  position: relative;
  display: block;

  .logo-inner {
    display: flex;
    align-items: center;
    height: 100%;
    .logo-img-content {
      position: relative;
      display: block;
    }
    .logo-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;
      letter-spacing: 0.1px;
      &.zero-left {
        margin-left: 0%;
      }
      .logo-name {
        position: relative;
        line-height: 16px;
        font-size: 16px;
        color: #121319;
      }
      .logo-subname {
        position: relative;
        line-height: 13px;
        font-size: 13px;
        color: #7d8085;
      }
    }
  }

  .postion-abs {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }

  .right-fade-out-ele {
    animation: right-fade-out ease 0.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }

  .right-fade-in-ele {
    animation: right-fade-in ease 0.5s;
    animation-delay: 2s;
    animation-fill-mode: both;
  }

  @keyframes right-fade-out {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(8px, 0);
    }
  }

  @keyframes right-fade-in {
    0% {
      opacity: 0;
      transform: translate(8px, 0);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  .left-fade-out-ele {
    animation: left-fade-out ease 0.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }

  .left-fade-in-ele {
    animation: left-fade-in ease 0.5s;
    animation-delay: 2s;
    animation-fill-mode: both;
  }

  @keyframes left-fade-out {
    0% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(-8px, 0);
    }
  }

  @keyframes left-fade-in {
    0% {
      opacity: 0;
      transform: translate(-8px, 0);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
`;