/* eslint-disable react/jsx-filename-extension */
import React, { useState } from 'react';
import dayjs from 'dayjs';
import Flexbox from 'flexbox-react';

import * as S from './styles';

const predictHelper = ['1', 'x', '2'];


const MatchRow = ({
  match: {
    homeTeam,
    awayTeam,
    kickoff,

  },
  rowIdx,
  preselected,
  setFieldValue,
}) => {
  const [checked, setChecked] = useState(null);
  return (
    <>
      <S.Kickoff>
        {dayjs(kickoff * 1000).format('MMM DD, HH:mm')}
      </S.Kickoff>
      <Flexbox
        alignItems="center"
        justifyContent="space-between"
        style={{
          width: '90%',
          height: '50px',
          color: 'white',
          alignSelf: 'center',
          marginBottom: '20px',
          borderRadius: '12px',
          background: '#132335',
          boxShadow: 'inset 0px 1px 0px #19324D',
        }}
      >
        <Flexbox
          width="100%"
          height="100%"
          justifyContent="space-between"
          alignItems="center"
        >
          {[homeTeam, 'Draw', awayTeam].map((v, idx) => (
            <S.InnerWrapper
              key={idx}
              style={{
                display: 'flex',
                width: '100%',
                alignItems: 'center',
                alignSelf: 'center',
                justifyContent: 'center',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                textAlign: 'center',
              }}
            >
              <input
                type="radio"
                name={`radio${rowIdx}`}
                id={`radio${rowIdx}_${v}`}
                value={v}
                onChange={() => {
                  setChecked(v);
                  setFieldValue(predictHelper[idx]);
                }}
              />
              <S.Value
                idx={idx}
                active={v === checked || predictHelper[idx] === preselected}
                htmlFor={`radio${rowIdx}_${v}`}
              >
                {v}
              </S.Value>
            </S.InnerWrapper>
          ))}
        </Flexbox>
      </Flexbox>
    </>
  );
};

export default MatchRow;