import camelCase from 'lodash/camelCase';
import upperFirst from 'lodash/upperFirst';
import { Typography } from '@mui/material';

import { styled } from '../Theme';

export interface InfoRowProps {
  name: React.ReactNode;
  nameFormatter?: (name: React.ReactNode) => React.ReactNode;
  layout?: 'horizontal' | 'vertical';
  children: React.ReactNode;
  valueComponent?: React.ElementType;
  nameWidth?: number;
}

function InfoRow({
  name,
  nameFormatter = (rawName) => {
    if (typeof rawName === 'string') {
      return rawName
        .split(' ')
        .map((x: any) => upperFirst(camelCase(x)))
        .join(' ');
    }

    return rawName;
  },
  layout = 'horizontal',
  children,
  valueComponent = 'div',
  nameWidth = 90,
  ...rest
}: InfoRowProps) {
  return (
    <Container layout={layout} width={nameWidth} {...rest}>
      <Typography color="textSecondary" className="info-row__name">
        {nameFormatter(name)}
      </Typography>

      {children && (
        <Typography color="textPrimary" component={valueComponent} className="info-row__value">
          {children}
        </Typography>
      )}
    </Container>
  );
}

type ContainerProps = {
  layout: 'horizontal' | 'vertical';
  width: number;
};

const Container = styled('div')<ContainerProps>`
  display: flex;
  flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
  justify-content: flex-start;
  align-items: ${(props) => (props.layout === 'vertical' ? 'flex-start' : 'center')};
  margin-bottom: 16px;

  .info-row__name {
    width: ${(props) => props.width}px;
    margin-right: ${(props) => (props.layout === 'vertical' ? '0' : '8px')};
    margin-bottom: ${(props) => (props.layout === 'vertical' ? '8px' : '0')};
    text-transform: capitalize;
  }

  .info-row__value {
    flex: 1;
    overflow: auto;
    word-wrap: break-word;
    font-weight: 500;
  }

  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .info-row__name {
      font-weight: bold;
    }

    .info-row__value {
      width: 100%;
      font-size: 12px;
      margin-top: 8px;
    }
  }
`;

export default InfoRow;
