import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import dayjs from 'dayjs';

import { LOG_ACTIONS_CONFIG } from '../constants';

import { getUserTimezoneSelector } from '@/modules/@common/user/redux/selectors';

import { Tooltip, Typography } from '@/mui/components';

import styles from './CustomLogBar.module.scss';

function CustomLogBar(props) {
  const timezone = useSelector(getUserTimezoneSelector);
  if (props.value && props.logValues?.length) {
    const user = props.logValues[0]?.user?.firstName?.charAt(0) ?? '';

    return (
      props.value && (
        <svg>
          {props.height && (
            <foreignObject x={props.x - 10} y={props.y - 22} width={20} height={22}>
              <div>
                <Tooltip
                  classes={{ tooltip: styles.Tooltip }}
                  placement="top"
                  interactive="true"
                  title={
                    props.logValues?.length && (
                      <div className={styles.TooltipContent}>
                        {props.logValues.map((log) => {
                          const time = dayjs(log.created).tz(timezone);
                          const logUser = log.user?.email ?? 'Unknown';
                          return (
                            <div key={log.id} className={styles.Info}>
                              <Typography variant="caption" color="text.primary" fontWeight={700}>
                                {`${time.format('DD/MM')} at ${time.format('HH:mm')}`}
                              </Typography>

                              {log.values?.map((value) => (
                                <div key={`${log.id}-${value.action}`}>
                                  <Typography variant="caption" color="text.primary" fontWeight={700}>
                                    {logUser || 'Unknown'}
                                  </Typography>
                                  <Typography variant="caption" color="text.primary">
                                    {` ${LOG_ACTIONS_CONFIG[value.action] ?? value.action}`}
                                  </Typography>
                                </div>
                              ))}
                            </div>
                          );
                        })}
                      </div>
                    )
                  }
                  onOpen={() => {
                    props.setShowTooltip(false);
                  }}
                  onClose={() => {
                    props.setShowTooltip(true);
                  }}
                >
                  <div className={styles.Label}>
                    <Typography variant="caption" color="text.primary">
                      {user || 'U'}
                    </Typography>
                  </div>
                </Tooltip>
              </div>
            </foreignObject>
          )}

          <rect x={props.x} y={props.y} width={1} height={props.height} stroke="none" fill={props.fill} />
        </svg>
      )
    );
  }
  return null;
}

CustomLogBar.propTypes = {
  x: PropTypes.number.isRequired,
  y: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  fill: PropTypes.string.isRequired,
  value: PropTypes.number.isRequired,
  setShowTooltip: PropTypes.func.isRequired,
  logValues: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string,
      created: PropTypes.number,
      values: PropTypes.arrayOf(
        PropTypes.shape({
          action: PropTypes.string,
        }),
      ),
      user: PropTypes.shape({
        email: PropTypes.string,
        firstName: PropTypes.string,
      }),
    }),
  ).isRequired,
};

export default CustomLogBar;
